小程序开发-mpvue构建小程序项目-1-踩坑

mpvue-entry 插件引入

• mpvue的坑

  • mpvue新增页面或者模块的时候必须重新npm run dev才可以进行更新，不支持热更新
  • mpvue所有页面模块.vue文件都需要写main.js，重复工作

• 用途

  • 支持小程序热更新
  • 重新定义mpvue小程序页面配置

参考文档： npm-mpvue-entry

重点参考文档： github.com/F-loat/mpvu…

参考配置文档： mpvue-issue-F-loat的回答

• npm安装mpvue-entry依赖包

npm i mpvue-entry --save
复制代码

操作了半天，mpvue-entry的作者为了方便大家使用，开源了基于mpvue-entry的模版，大家可以直接使用这个quickStart进行构建项目

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 文件新增页面路径
• 支持热更新，无需重启

参考文档： github.com/F-loat/mpvu…

// pages.js
module.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 = false
App.store = store
App.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(git地址