前言
mpvue 的出現把 vue 的開發體驗帶到了小程序這個平臺中，但其目錄結構與傳統的 vue 項目卻并不完全一致，一個典型的頁面包含以下三個文件：
index.vue // 頁面文件main.js // 打包入口，完成 vue 的實例化main.json // 小程序特有的頁面配置，早期寫在 main.js 文件中
其中，每個頁面的 main.js 文件基本都是一致的，可通過mpvue-entry 來自動生成（weex 也有類似的處理），而 main.json 我個人認為直接在 vue 文件中配置更為合適，于是開發了mpvue-config-loader 來加以實現
本文將介紹如何在 mpvue 官方模板的基礎上，通過配置 mpvue-config-loader 來實現在 vue 文件內書寫小程序的頁面配置
步驟
初始化項目
vue init mpvue/mpvue-quickstart my-project
安裝依賴
npm i mpvue-config-loader -D
or
yarn add mpvue-config-loader -D
修改打包配置
build/webpack.base.conf.js
module.exports = { module: { rules: [ { test: //.vue$/, loader: 'mpvue-loader', options: vueLoaderConfig },+ {+ test: //.vue$/,+ loader: 'mpvue-config-loader',+ exclude: [resolve('src/components')],+ options: {+ entry: './main.js'+ }+ } ... ] } ... plugins: [ new MpvuePlugin(),- new CopyWebpackPlugin([{- from: '**/*.json',- to: ''- }], {- context: 'src/'- }), ... ]}修改頁面配置
src/App.vue - 復制 app.json 中的內容，并修改格式以符合 eslint 規范
<script>export default {+ config: {+ pages: [+ 'pages/index/main',+ 'pages/logs/main',+ 'pages/counter/main'+ ],+ window: {+ backgroundTextStyle: 'light',+ navigationBarBackgroundColor: '#fff',+ navigationBarTitleText: 'WeChat',+ navigationBarTextStyle: 'black'+ }+ }, created () { ... }}src/pages/logs/index.vue - 同上
import { formatTime } from '@/utils/index'import card from '@/components/card'export default {+ config: {+ navigationBarTitleText: '查看啟動日志'+ }, ...}啟動運行
npm run dev
or
yarn dev
其他
使用 mpvue-entry 的項目暫不建議使用該模塊，后期會直接集成作為可選模式之一
該模塊的實現方式有以下兩種可選，但由于前者在編輯器中暫無法高亮，所以采用了第二種方式
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
