MVVM使Vue在中小型Web應用程式中具有天然優勢，但隨著Vue的日益普及，Vue在大型專案中的使用略顯尷尬。

顯然，在高複雜性專案中，型別檢查已成為必需的特性，而TypeScript中的Vue2型別檢查支援不夠好，重要的是缺乏Vuex狀態邏輯的模組化設計。

以下是以下提出的解決方案：

商業邏輯的模組化 -  usm-vuex將解決模組化的重要問題

TypeScript - vue-cli3

TSX - 更好的模板型別檢查

依賴注入 - 最佳DI庫：inversify

Subpackage - 使用lerna構建Monorepo

在lerna初始化之後，執行域驅動設計，並獲得domain-driven。如有必要，可以在啟用動態匯入延遲載入或諸如RequireJS之類的模組載入器的情況下進行子打包，以提高執行時效能和構建效能。

在使用Vue-cli3結構初始化核心應用程式子包時，選擇TypeScript作為主要語言，它將自動引入Webpack ts-loder。

結合TSX的檢視元件模組，整體設計並基於此架構，使用TypeScript檢查型別會更容易。

Vue架構的核心設計部分應該是usm-vuex。它使Vuex的業務模組化變得簡單明瞭，它可以使當前的架構設計具有高內聚力和與檢視層的ViewModule的低耦合。

它大大提高了體系結構中的可重用性和可維護性，並且透過依賴注入使模組之間的依賴關係變得清晰易懂。當然，對於大型應用程式還有許多其他細節需要完善，本文未對此進行介紹。

vue-cli 3.0環境開發，在安裝vue之前我們需要安裝node環境，這個我們只要在node官方下載node綠色免安裝版，然後再配置下環境變數即可使用node和npm了。

將node所在目錄配置到電腦的環境變數中就可以使用了，這裡我的目錄是D:\Program Files\node-v10.8.0-win-x86，這裡我們只要開啟電腦-屬性-系統設定-進階-環境變數中獎該路徑新增到path中即可， 快捷鍵“win+r ”開啟執行框，輸入cmd在彈出的視窗中輸入node -v 檢查node.js是否安裝成功。

這裡我們配置淘寶的映象源，這裡設定永久的輸入命令：npm config set registry https://registry.npm.taobao.org/

// 臨時 npm --registry https://registry.npm.taobao.org install express // 永久 npm config set registry https://registry.npm.taobao.org // 驗證是否成功 npm config get registry

現在我們可以開始來搭建vue-cli 3.0環境了，輸入命令：npm install -g @vue/cli 安裝vue3.0（-g： 指全域性安裝）,快捷鍵“win+r ”開啟執行框，輸入cmd在彈出的視窗中輸入vue -V（大寫的V哦）來 檢查vue是否安裝成功。

npm install -g @vue/cli

接下來我們繼續建立vue專案 ，vue3.0和2.0有點區別，不用在裝webpack了，直接使用命令：vue create project建立專案（project為專案名），進入專案配置，這裡選擇Manually select features（翻譯：手動選擇功能）。

進入下一個安裝配置選擇，這裡根據專案情況自行選擇配置，按上下鍵切換目標選項，按空格鍵勾選和取消，按a全選，按i反選，選好後回車確定（以下是幾個選項的相關意義），圖中是我的選擇。

Babel：指轉譯成瀏覽器可識別的語言，可以讓你的專案支援更新的語法，如es6\es7等 TypeScript：新增的選項卡 Progressive Web App (PWA) Support：指模擬原生app Router：路由管理 Vuex：vuex管理模式 CSS Pre-processors：css預處理語言 Linter / Formatter：程式碼規範 Unit Testing：元件單元測試 E2E Testing：端對端測試，模擬使用者真實場景

接下來提示我們選擇是否使用歷史路由：這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新載入頁面,我們輸入Y同意即可，然後就是選擇CSS預處理器語言，在彈出的選項中我選擇LESS

選擇ESLint的程式碼規範，此處使用 Standard程式碼規範，這裡我選擇了ESLint + Standard config（正常模式）

ESLint with error prevention only: 只進行報錯提醒； ESLint + Airbnb conf: 不嚴謹模式； ESLint + Standard config: 正常模式； ESLint + Prettier: 嚴格模式；

接著選擇程式碼檢查方式，這裡提示我們何時對進行程式碼檢測，我選擇在儲存時進行檢測，Lint and fix on commit（requires Git）【翻譯：整理並固定提交時（需要git）】

接著選擇單元測試解決方案，這裡選擇 我Jest

接著選擇 Babel、PostCSS、ESLint等配置檔案存放位置，第一個儲存配置檔案中，第二個放package.json裡，這裡我選擇單獨儲存在各自的配置檔案中。

接著提示是否在以後的專案中使用以上配置，這裡我們選擇no，下次自行配置，你也可以選擇yes。

完成以上資訊配置之後開始建立專案並開始下載依賴，我們只要耐心等待進度條完成，這樣我們就把Vue專案建立好並完成了初始化。

用<Vue+element>構建前端專案教程

用vue-cli來構建專案

安裝vue

npm install vue / cnpm install vue

安裝 vue腳手架 （命令列工具）

npm install --global vue-cli / cnpm install --global vue-cli

建立專案

vue init webpack dingCheng_web2

進入工程

cd dingCheng_web2

安裝依賴

npm install

安裝 vue-router

npm install vue-router --save

安裝 vue-vuex

npm install vuex --save

安裝 element-ui

npm i element-ui -save

安裝 axios

npm install axios -save

安裝 SASS 載入器

npm install sass-loader node-sass --save-dev /cnpm install sass-loader node-sass --save-dev

安裝less依賴

npm install less less-loader --save-dev

啟動測試

npm run dev

打包部署

npm run build

npm -save -save-dev 命令區別

npm install -save 命令

會將模組依賴寫入dependencies 節點。

npm install -save-dev 命令

會將模組依賴寫入devDependencies 節點。

總結

devDependencies 節點下的模組是我們在開發時需要用的，專案部署後是不需要的，我們可以使用 -save-dev 的形式安裝。

vue-cli目錄解析：

build 資料夾：用於存放 webpack 相關配置和指令碼。config 資料夾：主要存放配置檔案，用於區分開發環境、線上環境的不同。dist 資料夾：預設 npm run build 命令打包生成的靜態資原始檔，用於生產部署。node_modules：存放npm命令下載的開發環境和生產環境的依賴包。src: 存放專案原始碼及需要引用的資原始檔。src下assets：存放專案中需要用到的資原始檔，css、js、images等。src下componets：存放vue開發中一些公共元件：header.vue、footer.vue等。src下router：vue-router vue路由的配置檔案。src下api：自己配置的vue請求後臺介面方法。src下page：存在vue頁面元件的資料夾。src下utils：存放vue開發過程中一些公共的.js方法。src下vuex：存放 vuex 為vue專門開發的狀態管理器。src下app.vue：使用標籤<route-view></router-view>渲染整個工程的.vue元件。src下main.js：vue-cli工程的入口檔案。index.html：設定專案的一些meta頭資訊和提供<div></div>用於掛載 vue 節點。package.json：用於 node_modules資源部 和 啟動、打包專案的 npm 命令管理。

備註：字型粗部分為手動建立

推薦開發工具

HBuildder

https://www.dcloud.io/index.html