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

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相關插件配置 */

項目簡介

一個集 多頁應用 + 單頁應用 的混合項目框架。

適用於主要入口頁面生成多頁，子頁面和次要頁面使用單頁形式的項目。

技術棧

• ES6+
• Vue2.0
• Vuex
• Vue-Router
• Axios
• Webpack4

 

項目打包說明

• 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服務

有兩種方式：

一、執行命令 npm start 啓動當前項目時，會自動啓動mock服務（此爲默認方式，在package.json中配置）。

$ npm start

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

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