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>