摘要：適用于主要入口頁(yè)面生成多頁(yè)，子頁(yè)面和次要頁(yè)面使用單頁(yè)形式的項(xiàng)目。文件用來存放固定的數(shù)據(jù)，而文件可更加自由的處理并返回?cái)?shù)據(jù)。

VUE2的單頁(yè)應(yīng)用框架有人分享了，多頁(yè)應(yīng)用框架也有人分享了，這里分享一個(gè)單頁(yè)+多頁(yè)的混合應(yīng)用框架吧，node.js寫了一個(gè)簡(jiǎn)單的mock服務(wù)也集成在里面，整體初現(xiàn)雛形，還有很多需要優(yōu)化和改善的地方。。。

│
├─build                             /* webpack的配置目錄 */
│     ├─config.js                   /* 公共常量，用于配置文件 */
│     ├─utils.js                    /* 工具函數(shù)，用于配置文件 */
│     ├─webpack.base.conf.js        /* 公共配置文件 */
│     ├─webpack.dev.conf.js         /* 開發(fā)環(huán)境配置文件 */
│     └─webpack.prod.conf.js        /* 生產(chǎn)環(huán)境配置文件 */
│
├──mock                             /* mock服務(wù)和mock數(shù)據(jù) */
│    ├─api                          /* 存放mock數(shù)據(jù) */
│    └─mock-server.js               /* mock服務(wù) */
│
├──src                              /* 項(xiàng)目源碼 */
│    │
│    ├─api                          /* 所有后端接口 */
│    │  ├──index.js
│    │  └──product.js
│    │
│    ├─assets                       /* 公共的靜態(tài)文件 */
│    │  ├─fonts
│    │  ├─img
│    │  └─style
│    │
│    ├─utils                        /* 業(yè)務(wù)無關(guān)的工具函數(shù) */
│    │
│    ├─common                       /* 業(yè)務(wù)相關(guān)的公共函數(shù) */
│    │      config.js
│    │      http.js
│    │
│    ├─components                   /* 公共組件, 如Dialog、Loading等 */
│    │  └─navbar
│    │
│    ├─pages                        /*  頁(yè)面
│    │  │
│    │  ├─index/                        每個(gè)頁(yè)面一個(gè)文件夾，當(dāng)前頁(yè)面的樣式、圖片、子組件都存放在自已的文件夾下。
│    │  │                               為了項(xiàng)目結(jié)構(gòu)清晰，一級(jí)目錄以模塊劃分，二級(jí)目錄則為頁(yè)面目錄。
│    │  ├─my/                       */
│    │  │  └─order/
│    │  │
│    │  ├─product/
│    │  │   └─list/
│    │  │
│    │  ├─App.vue                   /* 多頁(yè)應(yīng)用的公共入口頁(yè)面 */
│    │  │
│    │  └─main.js                   /* 多頁(yè)應(yīng)用的公共入口函數(shù) */
│    │
│    ├─router                       /* 路由配置 */
│    │      router.js
│    │
│    └─store                        /* 狀態(tài)管理 */
│       │  actions.js
│       │  getters.js
│       │  index.js
│       │  mutation-types.js
│       │  mutations.js
│       │
│       └─modules
│
├─── .babelrc                       /* babel配置 */
├─── .editorconfig                  /* 開發(fā)工具配置 */
├─── index.html                     /* 公共模板文件 */
├─── package.json                   /* 包描述文件 */
└─── postcss.config.js              /* postcss相關(guān)插件配置 */

一個(gè)集 多頁(yè)應(yīng)用 + 單頁(yè)應(yīng)用 的混合項(xiàng)目框架。

適用于主要入口頁(yè)面生成多頁(yè)，子頁(yè)面和次要頁(yè)面使用單頁(yè)形式的項(xiàng)目。

ES6+

Vue2.0

Vuex

Vue-Router

Axios

Webpack4

?

npm模塊(vue、vuex之類)打包成一個(gè)多帶帶的js文件

公共組件和公共函數(shù)打包成一個(gè)多帶帶的js文件

單頁(yè)和多頁(yè)，都按頁(yè)面打包，即每個(gè)頁(yè)面組件都打包成多帶帶的js文件，按需加載

公共樣式和各頁(yè)面樣式均各自打包成多帶帶的css文件

"多頁(yè)面"根據(jù)添加一個(gè)簡(jiǎn)單的入口文件(entry.js)即可自動(dòng)生成html頁(yè)面。

打包時(shí)，自動(dòng)遍歷"/src/pages/"目錄，查找所有目錄下的"entry.js"文件，

每個(gè)"entry.js"文件都作為一個(gè)多帶帶的打包入口，每個(gè)入口生成多帶帶的.html文件

在需要生成多帶帶html頁(yè)面的目錄下新建一個(gè)entry.js文件，并引入一個(gè)公共的入口js文件 /src/pages/main.js，

給公共入口函數(shù)傳遞一個(gè)當(dāng)前html頁(yè)面默認(rèn)要展示的頁(yè)面組件。

entry.js 入口文件，只需要修改要加載的頁(yè)面組件即可，比如此例中的 ./list.vue

//導(dǎo)入公共入口文件 (必須)
import main from "@/pages/main"

//默認(rèn)加載的頁(yè)面組件 (必須)
import List from "./list.vue"

//傳遞一個(gè)要展示的頁(yè)面組件給公共入口函數(shù) (必須)
main.init(List)

?

一個(gè)打包入口對(duì)應(yīng)一個(gè)html模板。

所有頁(yè)面默認(rèn)使用項(xiàng)目根目錄下的 /index.html 作為模板。

如果某個(gè)頁(yè)面需要多帶帶的html模板，可在其目錄下新建名為 entry.html 的文件，打包時(shí)會(huì)自動(dòng)將其識(shí)別為當(dāng)前頁(yè)面的模板。

注:只有在有入口文件(entry.js)的目錄下添加多帶帶的html模板，才有效。

?

根據(jù) vue-router 插件的路由配置 (./router/router.js) 來生成單頁(yè)js文件。

每個(gè)html頁(yè)面都是共用的同一個(gè)路由配置 (router.js文件) ，因此單頁(yè)的頁(yè)面組件可渲染在任意一個(gè)html中。

?

此示例中沒有使用 Generator函數(shù) 和 async/await，所以排除了對(duì)應(yīng)的babel插件，打包文件也小了20幾Kb，

如果你需要它們，可以在 .babelrc 文件中去掉排除項(xiàng)。

所用插件在package.json文件中可查看，具體插件功能及配置可到插件的npm包主頁(yè)查看

?

npm install
or
yarn install

執(zhí)行以下命令預(yù)覽非常簡(jiǎn)單的demo

//啟動(dòng) Web 開發(fā)服務(wù)器與 Mock 服務(wù)器
npm start

//構(gòu)建生產(chǎn)文件
npm run build

?

所有mock文件直接放在 ./api 目錄的根目錄下。(不支持子目錄,可自行修改mock-server.js來實(shí)現(xiàn))

mock文件名必須和接口文件名一致，才能將請(qǐng)求接口匹配上mock文件。

mock文件可以是 .js 文件或 .jso 文件，如果對(duì)同一接口分別創(chuàng)建了js和json兩個(gè)mock文件，會(huì)優(yōu)先取js文件的數(shù)據(jù)。

json文件用來存放固定的mock數(shù)據(jù)，而js文件可更加自由的處理并返回mock數(shù)據(jù)。

修改api目錄下的mock文件后，無需重啟node服務(wù)，重新調(diào)用接口會(huì)返回新的數(shù)據(jù)。

有兩種方式：

1、執(zhí)行命令 npm start 啟動(dòng)當(dāng)前項(xiàng)目時(shí)，會(huì)自動(dòng)啟動(dòng)mock服務(wù)（此為默認(rèn)方式，在package.json中配置）。

$ npm start

2、手動(dòng)執(zhí)行node服務(wù)文件 ./mock/mock-server.js

$ node ./mock/mock-server.js

在配置文件 /build/webpack.dev.conf 中，使用webpack插件 webpack-dev-server 的代理屬性 (proxy) ，將接口服務(wù)器轉(zhuǎn)發(fā)到mock服務(wù)器。

mock服務(wù)器接收到轉(zhuǎn)發(fā)過來的請(qǐng)求后，截取URL請(qǐng)求路徑中的接口名，再用API接口的名字去匹配 ./mock/api 目錄下的mock文件名，
最終返回mock文件中的數(shù)據(jù)。

mock文件名必須和接口文件名一致

例1：
如果接口為 "/service/user/getUserInfo"
則mock數(shù)據(jù)文件名為 "getUserInfo.js" 或者 "getUserInfo.json"
例2：
如果接口為 "/service/user/getUserInfo.do"
則mock數(shù)據(jù)文件名為 "getUserInfo.do.js" 或者 "getUserInfo.do.json"

API接口名.json 文件只支持json格式的數(shù)據(jù)，例:

{
  "code": 1,
  "msg": "失敗",
  "data":{
      "age": 520,
      "card": 10099
  },
  "servertime": 1534835882204
}

API接口名.js 文件必須導(dǎo)出一個(gè)函數(shù)，函數(shù)接收兩個(gè)參數(shù)，需在函數(shù)中返回mock數(shù)據(jù)，例：

/*
    返回mock數(shù)據(jù)

    @param {object} getData  接口的GET數(shù)據(jù)
    @param {object} postData 接口的POST數(shù)據(jù)
 */
module.exports = function(getData, postData) {
  //to do something...

  return {
    code: 0,
    msg: "成功"
    data: {}
  }
}

?

最后，框架源碼地址：https://github.com/ahbool/vue-mix-pages，歡迎 +Star

demo很爛，將就著看吧 !-_-

在使用過程中如果發(fā)現(xiàn)有待優(yōu)化的地方或者好的建議，歡迎提出。。。