mpvue 單文件頁面配置

前言

mpvue 的出現(xiàn)把 vue 的開發(fā)體驗(yàn)帶到了小程序這個(gè)平臺(tái)中,但其目錄結(jié)構(gòu)與傳統(tǒng)的 vue 項(xiàng)目卻并不完全一致嚷炉,一個(gè)典型的頁面包含以下三個(gè)文件:

index.vue // 頁面文件
main.js // 打包入口,完成 vue 的實(shí)例化
main.json // 小程序特有的頁面配置绘证,早期寫在 main.js 文件中

其中哗讥,每個(gè)頁面的 main.js 文件基本都是一致的,可通過 mpvue-entry 來自動(dòng)生成(weex 也有類似的處理)魏宽,而 main.json 我個(gè)人認(rèn)為直接在 vue 文件中配置更為合適腐泻,于是開發(fā)了 mpvue-config-loader 來加以實(shí)現(xiàn)

本文將介紹如何在 mpvue 官方模板的基礎(chǔ)上队询,通過配置 mpvue-config-loader 來實(shí)現(xiàn)在 vue 文件內(nèi)書寫小程序的頁面配置

步驟

  1. 初始化項(xiàng)目
vue init mpvue/mpvue-quickstart my-project
  1. 安裝依賴
npm i mpvue-config-loader -D

or

yarn add mpvue-config-loader -D
  1. 修改打包配置
  • 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/'
-   }),
    ...
  ]
}
  1. 修改頁面配置
  • src/App.vue - 復(fù)制 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: '查看啟動(dòng)日志'
+ },
  ...
}
  • src/app.json - 刪除

  • src/pages/logs/main.json - 刪除

  1. 啟動(dòng)運(yùn)行
npm run dev

or

yarn dev

其他

  • app.vue 文件中可設(shè)置 globalConfig 屬性鸭津,其會(huì)與頁面配置進(jìn)行合并肠缨,可實(shí)現(xiàn)全局引用原生組件

  • 使用 mpvue-entry 的項(xiàng)目暫不建議使用該模塊,后期會(huì)直接集成作為可選模式之一

  • 該模塊的實(shí)現(xiàn)方式有以下兩種可選闻书,但由于前者在編輯器中暫無法高亮脑慧,所以采用了第二種方式

    • 自定義標(biāo)簽 <config></config>
    • <script></script> 標(biāo)簽導(dǎo)出對象的 config 屬性
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末闷袒,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子晃择,更是在濱河造成了極大的恐慌也物,老刑警劉巖蝴光,帶你破解...
    沈念sama閱讀 211,817評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異告材,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)浙踢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門灿渴,熙熙樓的掌柜王于貴愁眉苦臉地迎上來骚露,“玉大人,你說我怎么就攤上這事焰扳∥笮” “怎么了?”我有些...
    開封第一講書人閱讀 157,354評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵育瓜,是天一觀的道長栽烂。 經(jīng)常有香客問我,道長焰手,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,498評(píng)論 1 284
  • 正文 為了忘掉前任书妻,我火速辦了婚禮躲履,結(jié)果婚禮上估灿,老公的妹妹穿的比我還像新娘。我一直安慰自己域慷,他們只是感情好汗销,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評(píng)論 6 386
  • 文/花漫 我一把揭開白布弛针。 她就那樣靜靜地躺著,像睡著了一般宙枷。 火紅的嫁衣襯著肌膚如雪掉房。 梳的紋絲不亂的頭發(fā)上卓囚,一...
    開封第一講書人閱讀 49,829評(píng)論 1 290
  • 那天哪亿,我揣著相機(jī)與錄音,去河邊找鬼蝇棉。 笑死芥永,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的贴唇。 我是一名探鬼主播,決...
    沈念sama閱讀 38,979評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼戳气,長吁一口氣:“原來是場噩夢啊……” “哼瓶您!你這毒婦竟也來了呀袱?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,722評(píng)論 0 266
  • 序言:老撾萬榮一對情侶失蹤夜赵,失蹤者是張志新(化名)和其女友劉穎寇僧,沒想到半個(gè)月后嘁傀,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,189評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡细办,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評(píng)論 2 327
  • 正文 我和宋清朗相戀三年岛啸,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了娃殖。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片议谷。...
    茶點(diǎn)故事閱讀 38,654評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖芬首,靈堂內(nèi)的尸體忽然破棺而出郁稍,到底是詐尸還是另有隱情胜宇,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布财破,位于F島的核電站左痢,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏俊性。R本人自食惡果不足惜描扯,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評(píng)論 3 313
  • 文/蒙蒙 一绽诚、第九天 我趴在偏房一處隱蔽的房頂上張望典徊。 院中可真熱鬧,春花似錦憔购、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至檐盟,卻和暖如春褂萧,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背葵萎。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評(píng)論 1 266
  • 我被黑心中介騙來泰國打工导犹, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人羡忘。 一個(gè)月前我還...
    沈念sama閱讀 46,382評(píng)論 2 360
  • 正文 我出身青樓谎痢,卻偏偏與公主長得像,于是被迫代替她去往敵國和親卷雕。 傳聞我的和親對象是個(gè)殘疾皇子节猿,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容