mpvue 單文件頁面配置詳解
前言
mpvue 的出現(xiàn)把 vue 的開發(fā)體驗帶到了小程序這個平臺中，但其目錄結(jié)構(gòu)與傳統(tǒng)的 vue 項目卻并不完全一致，一個典型的頁面包含以下三個文件：
index.vue // 頁面文件 main.js // 打包入口，完成 vue 的實例化 main.json // 小程序特有的頁面配置，早期寫在 main.js 文件中
其中，每個頁面的 main.js 文件基本都是一致的，可通過mpvue-entry 來自動生成（weex 也有類似的處理），而 main.json 我個人認為直接在 vue 文件中配置更為合適，于是開發(fā)了mpvue-config-loader 來加以實現(xiàn)
本文將介紹如何在 mpvue 官方模板的基礎上，通過配置 mpvue-config-loader 來實現(xiàn)在 vue 文件內(nèi)書寫小程序的頁面配置
步驟
初始化項目
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 中的內(nèi)容，并修改格式以符合 eslint 規(guī)范
<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: '查看啟動日志'
+ },
...
}
- src/app.json - 刪除
- src/pages/logs/main.json - 刪除
啟動運行
npm run dev
or
yarn dev
其他
使用 mpvue-entry 的項目暫不建議使用該模塊，后期會直接集成作為可選模式之一
該模塊的實現(xiàn)方式有以下兩種可選，但由于前者在編輯器中暫無法高亮，所以采用了第二種方式
- 自定義標簽 <config></config>
- <script></script> 標簽導出對象的 config 屬性
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue項目 npm run build 打包項目防止瀏覽器緩存的操作方法
這篇文章主要介紹了vue項目 npm run build 打包項目防止瀏覽器緩存的操作方法,本文給大家推薦兩種方法，每種方法通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-08-08
Vue2?Dialog彈窗函數(shù)式調(diào)用實踐示例
這篇文章主要為大家介紹了Vue2?Dialog彈窗函數(shù)式調(diào)用實踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)日歷備忘錄功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要介紹了Vue.js特性Scoped Slots的淺析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了vue中使用jwt-decode解析token,文末給大家補充介紹了vue通過jwt-decode解析token獲取需要的數(shù)據(jù)，本文給大家介紹的非常詳細，需要的朋友可以參考下2022-06-06
@vue/cli4升級@vue/cli5?node.js?polyfills錯誤的解決方式
最近在升級vue/cli的具有了一些問題,解決問題的過程也花費了些時間,所以下面這篇文章主要給大家介紹了關于@vue/cli4升級@vue/cli5?node.js?polyfills錯誤的解決方式,需要的朋友可以參考下2022-09-09
VUE +Element 實現(xiàn)多個字段值拼接功能
這篇文章主要介紹了VUE +Element 實現(xiàn)多個字段值拼接,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
vue將秒數(shù)轉(zhuǎn)成"時分秒"格式實例代碼
在項目中,請求后臺接口返回的值是秒,這篇文章主要給大家介紹了關于vue將秒數(shù)轉(zhuǎn)成"時分秒"格式的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue+iview使用樹形控件的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
vue2.x 通過后端接口代理,獲取qq音樂api的數(shù)據(jù)示例
今天小編就為大家分享一篇vue2.x 通過后端接口代理,獲取qq音樂api的數(shù)據(jù)示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10