基於vue-cli的多頁面應用腳手架

JayZangwill發表於2018-03-06
Vue

前言

原文

掘金

知乎&知乎專欄

目前vue-cli生成的配置都是做多頁面的，然而，我們有時也會有多頁面的需求。 同時，之前借用的這個多頁面例子貌似作者不再維護了，導致webpack升級到webpack2就無法使用了，所以我就參考這個例子自己弄了個多頁面腳手架，會不定期維護的。

程式碼地址：https://github.com/JayZangwill/vue-multipage 有什麼問題可以在issues上提，歡迎star

下載&使用

git clone https://github.com/JayZangwill/vue-multipage
cd vue-multipage
npm i

//開發模式（執行完後要在瀏覽器輸入http://localhost:8081/module/index）
npm run dev

//生產模式
npmrun build
複製程式碼

目錄結構

vue-multipage
  |---build
  |---config
  |---src
    |---assets   
    |---components  元件
      |---HelloWorld.vue
      |---other.vue
    |---module多頁面模組
      |---index  
        |---index.html
        |---index.js
        |---App.vue
      |---other
        |---index.html
        |---other.js
        |---App.vue
複製程式碼

說明

如需新增頁面需要在module目錄下新建資料夾，然後資料夾裡必須包括.hmtl，.js，.vue檔案作為入口檔案。

執行npm run dev命令後，需要在瀏覽器輸入http://localhost:8081/module/+module下目錄資料夾名/+資料夾名裡的html檔案

已知bug

  1. 目前公用css還無法分離
  2. 開發模式需要手動輸入url開啟頁面，不能直接開啟。

同時也歡迎提程式碼pull來幫助我解決bug

參考

vue-cli + webpack 多頁面例項應用

相關文章