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