在用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