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