從零開始搭建包含多個子系統的Vue工程項目

本文以windows爲例，介紹支持多個子系統的Vue工程項目的搭建過程，相對於單一系統的工程，多個子系統引入了以下一些問題：

• 項目目錄結構設計
• 打包結果設計：每一個子系統能夠獨立發佈上線
• 多佈局實現：多種頁面佈局並存
• 公共組件的分層組織

 

1、     Vue環境搭建和項目初始化（windows）

詳細過程參見《Vue環境搭建和項目初始化（windows）》

PS：npm建議V5.4.2以上，保證package-lock.json起做用，保證可重複構建，詳解見相關文檔

2、     npm模塊安裝和使用

1.    全部子系統通用的npm模塊

這裏是比較通用的模塊，支持一個系統運行最基本的模塊，基本上是最小組合（除ElementUI）

a)     axios

基於promise的HTTP庫，能夠用在瀏覽器和node.js中

   i.          安裝

npm install axios –save

  

 

b)     mockjs

模擬數據生成器，讓前端獨立於後端進行開發，返回模擬的響應數據。

i.          安裝

npm install mockjs --save

 

c)     在vue2中使用mockjs與axios

全局使用axios避免引入麻煩https://zhuanlan.zhihu.com/p/29102204

i.          根據數據模板生成模擬數據。

 

 ii.          生成響應數據

當攔截到匹配‘/msg’的 Ajax 請求時，函數msg.getMsg將被執行，並把執行結果做爲響應數據返回

 

iii.          要在main中引入該項目全部請求使用mockjs模擬（重要）

 

iv.          組件中使用axios調接口

 

d)     開發環境代理配置：（根據各自須要）

config/index.js文件中

{
  dev：
    proxyTable： {}
}

 

e)     element

組件庫

   i.          安裝

npm install element-ui –save

 

 ii.          使用

在 main.js 中寫入如下內容：

import Vue from 'vue';
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
 Vue.use(ElementUI); new Vue({
  el: '#app',
  render: h => h(App)
});

f)      vuex

狀態管理模式，記錄登陸狀態，用戶信息

   i.          安裝

npm install vuex –save

 

 ii.          註冊到根組件

 

iii.          store組織，拆分modules

 

2.    子系統特有npm

各個子系統因爲業務不一樣可能包含各自單獨須要的模塊，這個根據具體業務須要決定

a)     子系統A

……

b)     子系統B

……

3、     同一個項目目錄下包含多個子系統

1.    一個項目應該包含的內容

單頁面的vue項目由main.js、App.vue、index.html三個核心文件組織構成，針對每一個子系統單獨創建這三個核心文件，最終單獨打包，使每一個子系統獨立成爲一個單頁面vue工程。

文件名	說明
main.js	入口文件
App.vue	根組件template，每一個具體頁面均由APP.vue+路由指向的子組件構成
index.html	生成html入口文件模板

2.    vue項目中的webpack配置文件

使用腳手架建立的webpack標準模板項目中，webpack的配置文件位於項目/build目錄下，結構以下：

 

 

文件	說明
webpack.base.conf.js	基礎配置信息，開發、測試、生產環境共用。包含入口文件配置
webpack.dev.conf.js	開發環境配置信息。包含開發環境下html入口文件的配置
webpack.prod.conf.js	生產環境配置信息。包含生產環境下html入口文件的配置，以及公共庫的打包配置
webpack.test.conf.js	測試環境配置信息

3.    基礎配置：入口文件

 

以任務中心、我的中心兩個子系統爲例，分別配置兩個子系統的入口文件，如上圖

4.    生產環境配置

a)     配置html入口文件

針對每個子系統生成其對應的一個html入口文件，直接位於dist目錄下。

這裏有個坑，在每一個HtmlWebpackPlugin的chunks中必定要加入'vendor'和'manifest'兩個公共模塊，這樣webpack才能正確識別項目的依賴關係，自動將公共模塊引入到單頁html中

 

HtmlWebpackPlugin插件的具體配置項含義參考官方文檔

http://www.css88.com/doc/webpack2/plugins/html-webpack-plugin/

https://github.com/jantimon/html-webpack-plugin#configuration

http://www.cnblogs.com/wonyun/p/6030090.html

b)     修改js、css文件輸出路徑

各個子系統的js和css文件輸出到以各自名稱命名的目錄下，即，dist/[name]/static下

 

c)     公共模塊單獨打包

默認配置將node_modules中的依賴單獨打包到vendor，暫時不須要修改和作單獨配置，簡單標明配置項。後續各個子系統單獨的依賴需考慮打包策略

 

5.    開發環境配置

a)     配置html入口文件

開發環境下須要修改html入口文件模板配置便可，同生產環境，不要忘了'vendor'和'manifest'兩個公共模塊

 

6.    打包結果

a)     多文件打包結果

通過上述配置後打包結果以下圖所示，各個子系統單獨部署時需將子系統文件、mainfest、vendor、子系統html一同部署，多個子系統部署在同一服務器時mianfest與vendor可只部署一次。

 

b)     多文件訪問路徑

格式：http://{服務器IP或域名}:{端口號}/{模板名}.html#/{具體路由}

服務器IP或域名：各個子系統部署位置

模板名：各個子系統不一樣，根據html入口配置項有關

具體路由：各個子系統各自管理內部路由

例如：http://localhost:8080/task.html#/app

http://localhost:8080/personal.html#/personal

c)     原單文件入口打包結果（僅供參考對比）

 

7.    最終項目目錄

 

d)     項目主目錄

目錄名	說明
build	Webpack打包配置文件目錄
config	項目配置信息
dist	打包結果目錄
node_modules	依賴包安裝目錄
src	項目代碼目錄
static	靜態文件目錄
template	入口html文件目錄
test	單元測試文件目錄

e)     項目代碼目錄

目錄名	說明
assets	公共js、css文件
components	公共組件目錄，全部子系統共用
modules	子系統模塊目錄

f)      子系統列表

目錄名	說明
task_center	任務中心子系統
personal_center	我的中心子系統
……	……

g)     子系統內部項目目錄

目錄名	說明
api	接口代理文件目錄
asset	靜態資源目錄
common	公共函數目錄：子系統公共邏輯處理函數
components	公共組件目錄：子系統公共組件
data	數據處理：各個頁面的數據處理方法
mock	Mock服務：攔截ajax請求，根據模板模擬生成並返回數據
pages	頁面目錄：每一個頁面對應一個pages下級目錄，包含頁面級組件
router	路由目錄
store	Vuex狀態管理目錄
App.vue	子系統根組件文件
main.js	子系統入口文件

8.    後續任務

對於打包構建這塊目前作的還不夠細緻，還有一些其餘優化能夠作，記下來先

• 自動構建入口函數
• 單獨發佈打包指定某一個子系統
• 子系統特有依賴模塊打包策略

4、     elementUI自定義主題

官網說明：http://element-cn.eleme.io/2.3/#/zh-CN/component/custom-theme

1.    安裝工具（全局安裝）

npm install element-theme –g

2.    安裝默認主題

在項目目錄下執行命令：

npm i element-theme-chalk –D

3.    初始化變量文件

et –i

產生element-variables.scss文件

4.    修改變量

修改element-variables.scss文件中的色值等變量

5.    編譯主題

et

此時，項目目錄下會產生主題樣式目錄theme

6.    引入自定義主題

import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue' 

Vue.use(ElementUI)

7.    說明

theme目錄及element-variables.scss文件需提交

5、     多佈局實現

vue-route中使用嵌套空的子路由。目前APP.vue只包含一個能夠不使用命名視圖，多個的狀況考慮命名視圖

 

佈局屬於平臺級公共組件，位於src\components\layout目錄下，以‘_layout.vue’結尾的文件是佈局文件，佈局組件位於comp子目錄，具體結構見下圖：

 

6、     公共組件怎麼組織

組件層級歸屬詳細劃分見文檔《雲質量V4.0前端組件分析.xlsx》最後一個頁籤《組件層級及項目歸屬》

項目目錄結構組織見下表：

組件級別	所在項目目錄
平臺級公共組件	src\components
子系統級組件	src\modules\子系統\components
頁面級組件	src\modules\子系統\pages\頁面