VUE2的單頁應用框架有人分享了，多頁應用框架也有人分享了，這裡分享一個單頁+多頁的混合應用框架吧，node.js寫了一個簡單的mock服務，也集成在裡面，整體初現雛形，還有很多需要優化和改善的地方。。。 ...
VUE2的單頁應用框架有人分享了，多頁應用框架也有人分享了，這裡就分享一個單頁和多頁的混合應用框架吧，初現雛形，還有很多需要優化和改善的地方。。。
結尾有github地址。
項目結構
│
├─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很爛，將就著看吧 !-_-
在使用過程中如果發現有待優化的地方或者好的建議，歡迎提出。。。
