mpvue是美团团队开发的开源前端框架,项目地址为:https://github.com/Meituan-Dianping/mpvue,使用时可以参考该文档。该框架基于vue.js,通过改写compile文件,将vue文件重新编译为小程序能够识别的wxml等文件,底层还是小程序语法。
mpvue有一个5分钟上手的 quick-start 教程,通过该教程可以快速搭建一个mpvue的项目框架,那么为什么我还要写这篇文章呢?主要是基于以下两点:
①页面配置:mpvue的默认页面需要一个xx.vue单页面组件,同时配合上一个 main.js文件,因为每个页面都需要,所以main.js显得比较冗余。
②路由跳转:因为小程序与vue的路由机制的差异,所以无法使用vue-router来实现路由跳转(vue跳转后,之前的页面会销毁,而小程序在页面跳转后,之前的页面不会销毁,而是跳转到后台运行)
基于第一点,采用第三方插件:mpvue-entry(集中式页面配置,自动生成各页面的入口文件,优化目录结构,支持新增页面热更新), 其项目地址为:https://github.com/F-loat/mpvue-entry,使用时可以参考该文档。我的项目demo就是基于该项目的。
vue init F-loat/mpvue-quickstart mpvue-base-framework
// 一路回车
cd mpvue-base-framework
npm install
npm run dev
基于第二点,采用第三方插件:mpvue-router-patch (在mpvue中的vue-router兼容的路由写法), 其项目地址为:https://github.com/F-loat/mpvue-router-patch,使用时可以参考该文档。
npm install mpvue-router-patch
在项目src目录下的main.js文件中引入:
import Vue from 'vue'
import MpvueRouterPatch from 'mpvue-router-patch'
Vue.use(MpvueRouterPatch)
在项目src目录下新建router文件夹,在该文件夹下新建router.js文件,并将page.js中的内容复制到router.js中。(此时page.js的使命可以结束了,可以将该文件删除了)
在项目build目录下的webpack.base.conf.js文件中修改配置:
const entry = MpvueEntry.getEntry('./src/pages.js')
// 修改为:
const entry = MpvueEntry.getEntry('./src/router/router.js')
至此全部工作已完成,只需重新运行即可。
项目传送门:https://github.com/tianyalu/mpvue-base-framework
题外话:关于VsCode代码规则检查问题的配置(可选),在.eslintrc.js文件中的'rules'规则下添加如下内容:
"no-unused-vars": [1, {
// 允许声明未使用变量
"vars": "local",
// 参数不检查
"args": "none"
}],
"one-var": 0,
"spaced-comment": 0,
// 关闭函数括号前的空格验证
'space-before-function-paren': 0
本来也想把app.json文件也干掉的,但是使用最新的”mpvue-loader": "^1.1.2”打包时,不会自动生成app.json,会把main.js同级目录下的app.json拷贝到打包的dist文件中,即原来写在main.js中的这段代码
export default {
// 这个字段走 app.json
config: {
// 页面前带有 ^ 符号的,会被编译成首页,其他页面可以选填,我们会自动把 webpack entry 里面的入口页面加进去
pages: ['pages/logs/main', '^pages/index/main'],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
}
}
不会再被自动编译成app.json文件了。所以现在必须保留app.json文件了,详情可参考:http://mpvue.com/change-log/2018.7.24/
本文参考:基于mpvue搭建小程序项目框架