VUE2的單頁應用框架有人分享了，多頁應用框架也有人分享了，這裡分享一個單頁+多頁的混合應用框架吧，node.js寫了一個簡單的mock服務也整合在裡面，整體初現雛形，還有很多需要優化和改善的地方。。。
專案結構
│
├─build /* webpack的配置目錄 */
│ ├─config.js /* 公共常量，用於配置檔案 */
│ ├─utils.js /* 工具函式，用於配置檔案 */
│ ├─webpack.base.conf.js /* 公共配置檔案 */
│ ├─webpack.dev.conf.js /* 開發環境配置檔案 */
│ └─webpack.prod.conf.js /* 生產環境配置檔案 */
│
├──mock /* mock服務和mock資料 */
│ ├─api /* 存放mock資料 */
│ └─mock-server.js /* mock服務 */
│
├──src /* 專案原始碼 */
│ │
│ ├─api /* 所有後端介面 */
│ │ ├──index.js
│ │ └──product.js
│ │
│ ├─assets /* 公共的靜態檔案 */
│ │ ├─fonts
│ │ ├─img
│ │ └─style
│ │
│ ├─utils /* 業務無關的工具函式 */
│ │
│ ├─common /* 業務相關的公共函式 */
│ │ config.js
│ │ http.js
│ │
│ ├─components /* 公共元件, 如Dialog、Loading等 */
│ │ └─navbar
│ │
│ ├─pages /* 頁面
│ │ │
│ │ ├─index/ 每個頁面一個資料夾，當前頁面的樣式、圖片、子元件都存放在自已的資料夾下。
│ │ │ 為了專案結構清晰，一級目錄以模組劃分，二級目錄則為頁面目錄。
│ │ ├─my/ */
│ │ │ └─order/
│ │ │
│ │ ├─product/
│ │ │ └─list/
│ │ │
│ │ ├─App.vue /* 多頁應用的公共入口頁面 */
│ │ │
│ │ └─main.js /* 多頁應用的公共入口函式 */
│ │
│ ├─router /* 路由配置 */
│ │ router.js
│ │
│ └─store /* 狀態管理 */
│ │ actions.js
│ │ getters.js
│ │ index.js
│ │ mutation-types.js
│ │ mutations.js
│ │
│ └─modules
│
├─── .babelrc /* babel配置 */
├─── .editorconfig /* 開發工具配置 */
├─── index.html /* 公共模板檔案 */
├─── package.json /* 包描述檔案 */
└─── postcss.config.js /* postcss相關外掛配置 */專案簡介
一個集 多頁應用 + 單頁應用 的混合專案框架。
適用於主要入口頁面生成多頁，子頁面和次要頁面使用單頁形式的專案。
技術棧
專案打包說明
- npm模組(vue、vuex之類)打包成一個單獨的js檔案
- 公共元件和公共函式打包成一個單獨的js檔案
- 單頁和多頁，都按頁面打包，即每個頁面元件都打包成單獨的js檔案，按需載入
- 公共樣式和各頁面樣式均各自打包成單獨的css檔案
如何配置多頁?
“多頁面”根據新增一個簡單的入口檔案(entry.js)即可自動生成html頁面。
打包時，自動遍歷”/src/pages/”目錄，查詢所有目錄下的”entry.js”檔案，
每個”entry.js”檔案都作為一個單獨的打包入口，每個入口生成單獨的.html檔案
多入口配置
在需要生成單獨html頁面的目錄下新建一個entry.js檔案，並引入一個公共的入口js檔案 /src/pages/main.js，
給公共入口函式傳遞一個當前html頁面預設要展示的頁面元件。
入口示例
entry.js 入口檔案，只需要修改要載入的頁面元件即可，比如此例中的 ./list.vue
//匯入公共入口檔案 (必須)
import main from `@/pages/main`
//預設載入的頁面元件 (必須)
import List from `./list.vue`
//傳遞一個要展示的頁面元件給公共入口函式 (必須)
main.init(List)
html模板
一個打包入口對應一個html模板。
所有頁面預設使用專案根目錄下的 /index.html 作為模板。
如果某個頁面需要單獨的html模板，可在其目錄下新建名為 entry.html 的檔案，打包時會自動將其識別為當前頁面的模板。
注:只有在有入口檔案(entry.js)的目錄下新增單獨的html模板，才有效。
單頁配置
根據 vue-router 外掛的路由配置 (./router/router.js) 來生成單頁js檔案。
每個html頁面都是共用的同一個路由配置 (router.js檔案) ，因此單頁的頁面元件可渲染在任意一個html中。
外掛說明
此示例中沒有使用 Generator函式 和 async/await，所以排除了對應的babel外掛，打包檔案也小了20幾Kb，
如果你需要它們，可以在 .babelrc 檔案中去掉排除項。
所用外掛在package.json檔案中可檢視，具體外掛功能及配置可到外掛的npm包主頁檢視
安裝外掛
npm install
or
yarn install開發&打包
執行以下命令預覽非常簡單的demo
//啟動 Web 開發伺服器與 Mock 伺服器
npm start
//構建生產檔案
npm run build
mock資料服務
概述
- 所有mock檔案直接放在
./api目錄的根目錄下。(不支援子目錄,可自行修改mock-server.js來實現) - mock檔名必須和介面檔名一致，才能將請求介面匹配上mock檔案。
- mock檔案可以是
.js檔案或.jso檔案，如果對同一介面分別建立了js和json兩個mock檔案，會優先取js檔案的資料。 - json檔案用來存放固定的mock資料，而js檔案可更加自由的處理並返回mock資料。
- 修改api目錄下的mock檔案後，無需重啟node服務，重新呼叫介面會返回新的資料。
啟動mock服務
有兩種方式：
1、執行命令 npm start 啟動當前專案時，會自動啟動mock服務（此為預設方式，在package.json中配置）。
$ npm start2、手動執行node服務檔案 ./mock/mock-server.js
$ node ./mock/mock-server.js專案中使用mock介面
在配置檔案 /build/webpack.dev.conf 中，使用webpack外掛 webpack-dev-server 的代理屬性 (proxy) ，將介面伺服器轉發到mock伺服器。
mock伺服器接收到轉發過來的請求後，擷取URL請求路徑中的介面名，再用API介面的名字去匹配 ./mock/api 目錄下的mock檔名，
最終返回mock檔案中的資料。
mock檔案命名規則
mock檔名必須和介面檔名一致
例1：
如果介面為 “/service/user/getUserInfo”
則mock資料檔名為 “getUserInfo.js” 或者 “getUserInfo.json”
例2：
如果介面為 “/service/user/getUserInfo.do”
則mock資料檔名為 “getUserInfo.do.js” 或者 “getUserInfo.do.json”
mock檔案編寫規則
API介面名.json 檔案只支援json格式的資料，例:
{
"code": 1,
"msg": "失敗",
"data":{
"age": 520,
"card": 10099
},
"servertime": 1534835882204
}API介面名.js 檔案必須匯出一個函式，函式接收兩個引數，需在函式中返回mock資料，例：
/*
返回mock資料
@param {object} getData 介面的GET資料
@param {object} postData 介面的POST資料
*/
module.exports = function(getData, postData) {
//to do something...
return {
code: 0,
msg: "成功"
data: {}
}
}
最後，框架原始碼地址：https://github.com/ahbool/vue-mix-pages，歡迎 +Star
demo很爛，將就著看吧 !-_-
在使用過程中如果發現有待優化的地方或者好的建議，歡迎提出。。。