mpvue-entry 外掛引入

• mpvue的坑

  • mpvue新增頁面或者模組的時候必須重新npm run dev才可以進行更新，不支援熱更新
  • mpvue所有頁面模組.vue檔案都需要寫main.js，重複工作

• npm安裝mpvue-entry依賴包

  npm i mpvue-entry --save

  操作了半天，mpvue-entry的作者為了方便大家使用，開源了基於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.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地址