構建基於Vue.js的前後端於一體的開發環境(四)
目錄
5 前端工程化的使用
前面介紹的傳統的使用Vue.js的方式，其實我們就把各個js、css檔案直接引入到html介面就可以進行使用了非常簡單快捷。但是如果網站的功能很多，頁面很多那我們就需要建立很多html、js、css 檔案，時間一長這些檔案就會出現堆積和混亂，甚至會引起衝突導致功能出現問題。
能不能像服務端一樣有一個Maven這樣的工具可以管理我們的元件、構建並且編譯我們的專案那？答案是肯定的，那就是npm + webpack。
Npm為我們提供的能力就是查詢、安裝、管理我們的js工具，並且解決版本依賴的問題。
Webpack則為我們提供靜態模組 .vue、.less 等檔案的編譯打包的能力，正常情況下Webpack會將我們的專案打包成一個SPA（A Single Page Application）頁面，即一個 html、一個js、一個css 檔案，另外可能還會有css需要的一些資原始檔。
5.1 基礎專案搭建
那麼如何將這樣的開發環境構建到我們的專案中那？
第1步 安裝Node.js
Node.js 官網：https://nodejs.org/zh-cn/
如下圖，下載最新的“長期支援版”即可。
安裝介面會提示我們即將安裝的node 和 npm 的版本
驗證安裝是否成功：
$ node -v
v10.14.2
$ npm 可以正常輸出版本號，說明我們的安裝就成功了，安裝完成後，我們就可以通過npm來安裝我們需要的JS元件和框架了。
第2步 安裝國內的npm庫
同Maven一樣npm預設是走國外的庫去查詢和下載檔案的，在國內使用的話會非常慢。那麼我們就要安裝一個快速穩定的國內的庫：
$ npm i -g cnpm --registry=https://registry.npm.taobao.org
第3步 安裝Vue-Cli腳手架
Vue-Cli腳手架的功能就是他能夠幫助我們自動建立Vue的基本開發專案，類似於之前提到Spring Boot 的專案構建外掛，不同的是這個是基於命令列的。
安裝：
$ cnpm i -g vue-cli
這裡進行全域性安裝，驗證安裝是否成功：
$ vue -V
2.9.6
正常輸出版本號，說明我們已安裝成功。
第4步 構建前端專案基礎框架
首先我們在Web專案中建立一個用於儲存前端工程原始檔，同Maven的Src平級的目錄frontend,如下圖：
在命令列工具中，進入到專案根目錄用Vue構建一個Webpack的腳手架專案：
ash-3.2# cd ~/web-pro
bash-3.2# vue init webpack frontend
? Project name frontend (工程目錄名，預設之前命令中的專案名，直接回車即可)
? Project description A Vue.js project （專案描述，可以新增專案概要描述，不新增直接回車即可）
? Author robot（作者，一般預設為當前計算機名，直接回車即可）
? Vue build standalone （選第一項）
? Install vue-router? Yes （y，前端路由會使用到）
? Use ESLint to lint your code? No（程式碼檢查，選n idea足以勝任這個任務）
? Set up unit tests No（單元測試，選 n）
? Setup e2e tests with Nightwatch? No （也是測試的，選n）
? Should we run `npm install` for you after the project has been created? (recommended) no (是否執行安裝命令，選稍後手工安裝)
Mac OS預設情況下執行構建命令，會出現沒有許可權的問題，我們通過 sudo -s 命令進入bash模式即可正常進行操作。
初始化專案，上面最後一項我們之所以選擇手動安裝，就是預設會通過npm安裝，為了提高安裝速度我們通過cnpm命令進行安裝：
bash-3.2# cnpm install
✔ Installed 37 packages
✔ All packages installed
第5步 安裝前端專案依賴
我們安裝演示需要的最基本的依賴，專案中需要按照實際情況安裝相關的工具依賴，比如用於處理時間的moment.js 。
bash-3.2# cnpm install axios -S
✔ Installed 1 packages
✔ Linked 2 latest versions
✔ Run 0 scripts
✔ All packages installed
bash-3.2# cnpm install iview -S
✔ Installed 1 packages
✔ Linked 11 latest versions
✔ Run 0 scripts
✔ All packages installed
-S 引數會將組建自動配置到package.json中，如果不加這個引數使用是，需要手動將相關依賴的配置新增到dependencies配置中。
為目錄批量授權：
在bash模式建立的檔案，預設情況iedea在當前使用者下是沒有修改許可權的我們需要將frontend目錄中所有檔案的許可權都授權給當前使用者，idea才能進行正常的編輯操作；
點選frontend專案目錄的右鍵，選擇“顯示簡介”，在最下方許可權設定框中將許可權設定好後，選擇“應用到包含的專案中”即可為所有檔案批量授權了。後續idea自己建立的檔案不會存在這種問題。
或者採用命令列的方式，回退到上級目錄執行如下命令即可：
bash-3.2# chmod -R 777 frontend/
這種方式比較徹底，採用選單的方式有的時候會有部分檔案或資料夾授權無效。
第6步 在idea中進行相關配置
要進行正常的開發idea還需要進行相關的配置，首先我們要安裝兩個外掛vue和npm外掛，在idea的外掛中心中直接搜尋這兩個關鍵詞進行安裝即可，此處就不贅述了；vue外掛的作用是幫我們進行日常檔案建立、編輯、提示、程式碼檢查等工作；npm外掛的作用是，幫助我們進行一鍵構建；
npm外掛配置：
進入run/debug 配置中心，點選+，選擇npm；
pack json: 選擇frontend目前中package.json檔案的位置
command: 選擇run
scripts：選擇build
配置完成後，當我們需要編譯構建前端工程的時候，執行這個配置項即可自動編譯構建；
更改Java Scripts 版本：
預設情況下iedea是不支援ES6的語法的，需要我們配置一下：
進入iedea：perferences -> Language&Frameworks -> JavaScript 將版本設定為ES6 即可。
第7步 更改Webpack打包檔案的輸出目錄
Webpack預設是將打包後文件輸出到前端專案根目錄下的dist資料夾中的，這一點顯然不符合我們服務端專案的規範，在dist目前中的檔案也是不能正常訪問的，我們需要將目錄修改到 src/main/resources/static（非Spring Boot 專案可能是其他目錄，按照這種方式修改配置即可） 目錄下：
開啟frontend/config/index.js 檔案，將css、js Map原始檔生成的配置取消，可以提高編譯打包的速度，當你需要進行前端debug的時候將配置設定成true即可。
中間的三個紅框，即配置了webpack打包檔案的輸出目錄，請參照上圖進行配置。
第8步 編譯打包測試執行
經過以上的步驟，我們的基本開發環境就構建好了，執行一下npm編譯打包程式：
執行完成後檢視打包檔案是否輸出到了我們配置的目錄下，確認無誤後，啟動服務端專案並在瀏覽器中訪問http://localhost:8080 (注：此處用的Spring Boot 預設的啟動方式，如果用Tomcat啟動話，埠號需要換成Tomcat 的埠)，正常情況下會顯示如下畫面：
至此我們的基本環境的構建就做完了。
5.2 在前端工程化的專案中使用iView
第1步 引入iView-UI元件庫
整體引入：
在 frontend/src/main.js 檔案中，新增如下配置：
import iView from 'iview'
Vue.use(iView)
這種方式最大的優點是簡單，但是會引入大量的iview元件，一般平時學習或者開發初期可以直接引入，這樣不用考慮具體都用什麼元件。這種方式相當於java中的import a.b.*
按需引入：
如果對網站載入效能有要求的情況下，我們需要對引入進行優化，按需引入。這樣可以有效的減小編譯後的js檔案的大小，提高瀏覽器初次對頁面的載入速度。一般移動端的專案，是要絕對做這樣的優化的。
列如我們需要引入Button和Table元件，那我們在frontend/src/main.js檔案中做如下配置：
import { Button, Table } from 'iview'
Vue.component('Button', Button)
Vue.component('Table', Table)
第2步 引入iview-ui 的樣式
想要正常使用iview-ui 我們還要引入樣式檔案，方式和很簡單，在frontend/src/main.js 檔案中做一個css引入即可：
import 'iview/dist/styles/iview.css'
前面的兩步僅僅介紹了iview-ui 的基本引入方式，詳細可以參照官方文件：https://www.iviewui.com/docs/guide/start
第3步 引入axios進行非同步資料互動
axios的引入方式與iview引入方式稍有差別：
import axios from 'axios'
Vue.prototype.ajax = axios
使用示例：
this.ajax.post("/work/getInitData", {}).then((response) => {
//獲得相應資料
let data = response.data;
console.log(data);
}).catch(function (error) {
//異常處理
this.$Message.info(error);
console.log(error);
});
詳細可以參考axios相關使用文件：
https://www.npmjs.com/package/axios
https://www.jianshu.com/p/7a9fbcbb1114