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 标签引入

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

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

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，需要进行如下配置：

引入 vant.js

在 script 标签中，代码如下：

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

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

3.避免页面出现源代码

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

首先，在 app div 签处加上v-cloak指令：

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