小程序经过了将近两年的锤炼,现在出现了许许多多的框架,来帮助我们进行快速开发,最近可能迷上了mpvue这个框架,所以就用公司的项目练练手。
mpvue是用vue作为基础骨架的,所以他非常想vue,所以说只要vue会,那么mpvue就会得心顺手了。
废话不多说!直接上手。
通过 Vue.js
命令行工具 vue-cli,你只需在终端窗口输入几条简单命令,即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目:
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev
这样我们就构建好了一个小程序
接着我们打开微信开发者工具,将项目导入,填上appid,这样我们就可以看到一个mpvue搭建的小程序呈现在眼前了(由于本人比较懒,截图就算了)
我们也可以使用vant UI框架进行页面辅助构建页面,只不过本人觉得要是想与设计稿一致的话,还是老老实实的写代码吧,别想其他没用的了。
当然,用mpvue写新的页面,不同像原生小程序一样在app.json写路径就会生成一个页面,在mpvue中,我们需要在src文件夹中的pages文件夹中新建文件夹如mine(我的),然后在这个文件夹里新建三个文件index.vue main.js main.json ,然后在
src文件夹中的app.json中的pages数组中添加pages/mine/main,这样就成功新建了一个页面,然后重启服务npm run dev(必须重启,否则新建失败,因为小程序处理的是他编译后的dist文件夹里的内容);而我常用的做法就是,复制其他页面文件夹,修改名字,在pages数组中添加路径,重启,这样
比较快点