mpvue-entry 插件引入
-
mpvue的坑
- mpvue新增页面或者模块的时候必须重新npm run dev才可以进行更新，不支持热更新
- mpvue所有页面模块.vue文件都需要写main.js，重复工作
-
用途
- 支持小程序热更新
- 重新定义mpvue小程序页面配置
参考文档：
重点参考文档：
参考配置文档：
- npm安装mpvue-entry依赖包
npm i mpvue-entry --save复制代码
操作了半天，mpvue-entry的作者为了方便大家使用，开源了基于mpvue-entry的模版，大家可以直接使用这个quickStart进行构建项目
mpvue-entry-quickStart 项目地址：
- mpvue-entry-quickStart 构建项目
$ npm install -g vue-cli $ vue init F-loat/mpvue-quickstart my-project $ cd my-project $ npm install $ npm run dev复制代码
mpvue-entry-quickStart模版使用方式
新增页面
- 在 **src/pages/**目录下新增.vue文件
- src/pages.js 文件新增页面路径
- 支持热更新，无需重启
参考文档：
// pages.jsmodule.exports = [ { path: 'pages/news/list', // 页面路径，同时是 vue 文件相对于 src 的路径，必填 config: { // 页面配置，即 page.json 的内容，可选 navigationBarTitleText: '文章列表', enablePullDownRefresh: true } }]复制代码 mpvue-entry 使用注意事项
分包与主包的配置
- 主包的页面必须放在项目默认 src/pages/ 文件夹下面
- 分包的页面配置，必须加上subPackage参数
module.exports = [ // 主包 { path: 'pages/cardList/index', // 页面路径，同时是 vue 文件相对于 src 的路径 }, { path: 'pages/card/index' }, // 分包 { path: 'packageA/logs', subPackage: true, config: { // 页面配置，即 page.json 的内容 navigationBarTitleText: '查看启动日志' } }]复制代码 小程序默认tabBar配置
参考文档：
用途
- 小程序提供的默认展示在底部的tab菜单栏
配置方式
- src/main.js 文件中添加config
// 主 main.js 文件import Vue from 'vue'import App from '@/App'import store from '@/store'Vue.config.productionTip = falseApp.store = storeApp.mpType = 'app'const app = new Vue(App)app.$mount()export default { // 这个字段走 app.json config: { pages: [], window: { backgroundTextStyle: 'light', navigationBarBackgroundColor: '#fff', navigationBarTitleText: 'WeChat', navigationBarTextStyle: 'black' }, // tabBar 配置 tabBar: { backgroundColor: "#fafafa", borderStyle: "white", selectedColor: "#b4282d", color: "#666", list: [ { pagePath: "pages/cardList/index", iconPath: "static/images/ic_menu_choice_nor.png", selectedIconPath: "static/images/ic_menu_choice_pressed.png", text: "cardlist" }, { pagePath: "pages/card/index", iconPath: "static/images/ic_menu_choice_nor.png", selectedIconPath: "static/images/ic_menu_choice_pressed.png", text: "card" }, ] } }}复制代码 BY-Luca_LJX(