用mpvue框架开发小程序之解决多个入口文件

在用mpvue自动生成的模板中，需要每个文件里都有入口文件main.js，比较繁琐，这时候我们就要用mpvue-entry、 mpvue-router-patch；
1、安装依赖

cnpm install mpvue-entry --save-dev
cnpm install mpvue-router-patch --save

2、项目src文件夹下创建router文件夹和router.js文件

3、在src下的main.js中引入mpvue-router-patch

import MpvueRouterPatch from 'mpvue-router-patch'
Vue.use(MpvueRouterPatch)

4、修改build文件夹中的webpack.base.conf.js配置文件

//定义mpvue-entr
var MpvueEntry = require('mpvue-entry')
let baseWebpackConfig = {
//在baseWebpackConfig中加入entry:MpvueEntry.getEntry('./src/router/router.js'),
    entry:MpvueEntry.getEntry('./src/router/router.js'),
    ......
    //在baseWebpackConfig中的plugins加入new MpvueEntry(),
    plugins:[
	    new MpvueEntry(),
	    .......
    ]
}

5、配置router.js文件

// 首个路由为首页
module.exports = [{
    path: 'pages/index',
    name: 'Index',
    config: {
        navigationBarTitleText: '文章详情',
　　　　//局部引入组件，后面会讲到
        usingComponents:{
            "i-button": "../dist/btn/index"
        }i
    }
}, {
    path: 'pages/list/list',
    name: 'List',
    config: {
        navigationBarTitleText: 'list详情'
    }
}]

6、使用组件，这里我用的是iView组件，从官网的github上将文件下载，把dist文件复制到项目的dist->wx


7、引入组件，分全局引入和局部引入，局部使用即在router.js中配置路由的时候写上即可，全局配置则是写在src下的app.json里

8、页面中使用UI组件

<template>
    <div class="index">
        <i-button type="primary" size="small">确认付款</i-button>
    </div>
</template>

至此，就可以将原本项目中的main.js删除（除了src下的main.js一个文件不删）然后编译，运行
如果有报关于mouble或者export的错，不用慌，这是因为安装的mpvue-entry插件版本过高导致与现有的mpvue冲突，解决方法如下：用此命令重新安装mpvue-entry

cnpm i mpvue-entry@next -D