webpack4+vue2+axios+vue-router的多頁+單頁混合應用框架

ahbool發表於2018-09-04
WebVueiOS框架

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資料服務

概述

  1. 所有mock檔案直接放在 ./api 目錄的根目錄下。(不支援子目錄,可自行修改mock-server.js來實現)
  2. mock檔名必須和介面檔名一致，才能將請求介面匹配上mock檔案。
  3. mock檔案可以是 .js 檔案或 .jso 檔案，如果對同一介面分別建立了js和json兩個mock檔案，會優先取js檔案的資料。
  4. json檔案用來存放固定的mock資料，而js檔案可更加自由的處理並返回mock資料。
  5. 修改api目錄下的mock檔案後，無需重啟node服務，重新呼叫介面會返回新的資料。

啟動mock服務

有兩種方式：

1、執行命令 npm start 啟動當前專案時，會自動啟動mock服務（此為預設方式，在package.json中配置）。

$ npm start

2、手動執行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很爛，將就著看吧 !-_-

在使用過程中如果發現有待優化的地方或者好的建議，歡迎提出。。。

相關文章