HBuilderX 5+app Vue3 开发(hbuilderx开发vue项目)

HBuilderX 5 app Vue3 开发

在 HBuilderX 的 5 app 项目开发中,一般我们会使用一些诸如 jQuery 之类的框架来进行开发,官方推荐使用 MUI 框架进行开发,当然, HBuilderX 的 5 app 项目是不限制使用什么框架,本质上来讲,什么框架都可以,只要 html 能够在浏览器中执行就可以了,那么,能不能使用 vue3 呢?答案是肯定的。

1.页面中使用 vue3

首先,vue.js 是一个易学易用,性能出色,适用场景丰富的 Web 前端框架。渐进式 JavaScript 框架。从 https://unpkg.com/vue@3/dist/vue.global.js 下载并存放到项目的 js 目录下;

然后,在 index.html 页面中,通过 script 标签引入

<script src="js/vue.global.js"></script>

接下来,便可以进行 vue 的页面开发,在 html 中,添加:

<div id="app"/>

并添加一个 script 标签,在该标签中的编写 vue 代码,如:

<script type="text/javascript"> const app = Vue.createApp({ data() { return { } }, mounted () { document.addEventListener('plusready', function(){ console.log("所有plus api都应该在此事件发生后调用,否则会出现plus is undefined。"); }); }, methods: { }, }); app.mount('#app'); </script>

2.页面中使用 vant

Vant 是一个轻量、可靠的移动端组件库,于 2017 年开源。

首先,从 Vant 官方网站下载 js 文件:

https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js

下载 css 样式文件:

https://fastly.jsdelivr.net/npm/vant@4/lib/index.css

分别放置到项目的 js 和 css 文件夹。

然后,在页面中使用 vant,需要进行如下配置:

<!-- 引入样式文件 --><link rel="stylesheet" href="css/index.css"/>

引入 vant.js

<script src="js/vant.min.js"></script>

在 script 标签中,代码如下:

<script type="text/javascript"> const app = Vue.createApp({ data() { return { } }, mounted () { document.addEventListener('plusready', function(){ console.log("所有plus api都应该在此事件发生后调用,否则会出现plus is undefined。"); }); }, methods: { } }); app.use(vant); app.use(vant.Lazyload); app.mount('#app'); </script>

也就是说,在 app 变量创建后,使用 use 方法加载 vant,即:

app.use(vant); app.use(vant.Lazyload);

3.避免页面出现源代码

当网络加载很慢时,或者频繁渲染时候,页面就会显示出源代码。

首先,在 app div 签处加上v-cloak指令:

<div id="app" v-cloak>

然后,在 css 中设置 v-cloak 的属性为: display为none

<style type="text/css"> [v-cloak] { display: none; }</style>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(1)
上一篇 2023年3月24日 上午9:26
下一篇 2023年3月24日 上午9:36

相关推荐

  • 新浪家居-u0026福蒙特系列沙龙之樊孟浩主题分享会成功举办(樊蒙现状)

    2021年12月22日下午3点,新浪家居&福蒙特设计师系列沙龙活动之樊孟浩《空间设计中的品牌营销》主题分享会,在福蒙特家居中心A馆5楼具创办公成功举办。 福蒙特家居中心总经…

    科研百科 2023年8月22日
    180
  • 严防基层党建标识随意化(严防基层党建标识随意化的措施)

    盲目追求装饰效果,正在某些地方衍生变形和不规范使用党建标识现象。半月谈记者调查发现,近年来,部分基层地区党建标牌、党建标识、党建雕塑、党建文化墙、党建宣传栏、党员活动室等过于追求装…

    科研百科 2024年6月25日
    62
  • 电影订票系统项目管理

    电影订票系统项目管理 电影订票系统是一个非常重要的业务系统,能够帮助电影放映机构实现在线订票、选座、支付等功能,提高用户购票体验,同时也能降低电影放映机构的运营成本。在项目管理方面…

    科研百科 2024年12月23日
    0
  • 软件项目管理机制

    软件项目管理机制是软件开发过程中至关重要的一环,能够有效地协调团队成员的工作,确保项目按时、按质完成。本文将介绍常用的软件项目管理机制,包括项目计划、团队协作、质量管理和风险管理等…

    科研百科 2024年9月2日
    30
  • 本地任务管理软件

    本地任务管理软件 随着现代生活节奏的加快,我们越来越需要一款方便易用的本地任务管理软件来帮助我们管理任务。作为一款功能强大且易于使用的软件,本地任务管理软件可以帮助您有效地组织和管…

    科研百科 2024年5月28日
    78
  • Skype网页版全球测试正式开启:支持简体中文(skype for business网页版)

    Skype网页版全球测试正式开启:支持简体中文(skype for business网页版) Skype网页版全球测试正式开启:支持简体中文 出处:IT之家 原创(晨风) IT之家…

    科研百科 2024年3月26日
    147
  • 土基熔盐核反应堆

    土基熔盐核反应堆是一种新型的核反应堆,它采用土基作为燃料,熔盐作为核燃料,并通过特殊的设计和控制技术,实现了安全、高效、可持续的核能利用。 土基熔盐核反应堆的工作原理是利用核裂变反…

    科研百科 2024年10月14日
    19
  • 科研项目验收申报书

    科研项目验收申报书 科研项目验收申报书 尊敬的评审专家: 我谨以此申报书,申请贵单位对我所承担的科研项目进行验收。 一、项目背景 本项目旨在通过研究,提升公司的核心竞争力,推动公司…

    科研百科 2025年3月8日
    0
  • 多个项目如何进行进度管理

    进度管理是项目管理中非常重要的一部分,它可以帮助项目团队更好地协调和控制项目进度,确保项目按时完成并达到预期效果。在多个项目中进行进度管理时,以下是一些基本步骤和技巧,可以帮助项目…

    科研百科 2024年8月26日
    37
  • 思科交换机的性价比首选CBS350

    开箱背景 说到交换机,IT圈的小伙伴们一定很熟悉一个品牌:在全球市场份额占据了半壁江山的思科,而说到思科交换机,大家印象中可能是2960,3650,3750,3560,3850这些…

    科研百科 2023年8月27日
    169