微信小程序之基于mpvue搭建项目框架

    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搭建小程序项目框架

                  mpvue踩坑记录