由于一直在搞後端開發，對于前端内容的掌握一直停留在css、jquery、js、html這類的基礎應用上。
一下子接觸到前端工程化、spa這類的東西，曲線有些陡峭，整個過程經曆了諸多曲折。将收集到的知識總結一下，摻雜着一些個人的了解，不一定準确。
開始搭建之前，先要搞清楚一些概念。
一些知識點
1、前端工程化
記得在剛剛進入軟體行業的時候，項目組中一般都會有美工這個角色，負責設計系統需要的各種圖檔、切圖，設計系統整體的樣式。上面的工作完成後就可以交給背景開發人員了，後者負責背景邏輯，從資料庫中讀取資料并渲染到頁面上。前端的所有工作圍繞着切圖、調樣式開展
現在的前端趨勢是什麼？就是工程化，工作的模式和後端開發一樣，也是多子產品多人協作開發（這也就誕生了CommonJS、AMD/CMD、require這些子產品化标準），那麼就需要進行工程化，否則代碼很難管理與維護。前端承擔的任務也比原來繁重了很多，後端隻需要提供接口API，剩下的視圖層的渲染工作全部由前端完成。前後端分工越來越清晰，前後端在項目開發過程中不再互相制約，前端與後端已經分離
同時，前端開發已經不是所見即所得了，比如es6、less是不能夠得到所有浏覽器的完美支援的，但是這些東西還能加快我們的開發效率，那怎麼權衡呢？那麼就需要解釋為浏覽器能夠完美支援的css、js文法
2、webpack
一些基本概念請參照：官方教程
官方的解釋：webpack 是一個現代 JavaScript 應用程式的靜态子產品打包器(module bundler)
在我自己的項目場景中，webpack就是将es6、less、vue、圖檔、字型這些資源通通都打包為浏覽器能夠解析的js、css代碼
3、Node.js 的 包管理器npm
全球最大的開源生态系統，在前端項目建構過程中，會不斷的使用該指令去添加項目對各種第三方子產品的依賴，例如：添加html-webpack-plugin的引用
cnpm install html-webpack-plugin --save-dev 複制
給我的感覺它就向背景建構工具Maven，Maven是通過在pom檔案中添加子產品的坐标來添加依賴，例如：添加對Mybatis的依賴
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>${version.mybatis-spring}</version>
</dependency> 複制
搭建過程
以下過程都是基于webpack4的
1、安裝node.js
進入 https://nodejs.org/en/download/ 根據自己電腦的系統不同，下載下傳對應的安裝檔案，進行安裝
2、由于npm下載下傳資源很慢，是以推薦使用阿裡的 cnpm來取代npm
3、安裝webpack，我裝的是4.5.0版本
sudo cnpm install [email protected] -g 複制
4、安裝後，發現webpack -h不好使，提示要安裝webpack-cli
sudo cnpm install webpack-cli -g
sudo cnpm install webpack-cli -D 複制
這兩步都要執行
5、初始化工程
建立工程目錄
mkdir syInfoApp 複制
進入工程目錄
cd syInfoApp 複制
初始化
cnpm init 複制
安裝後，目錄下會産生一個package.json檔案，它類似于Maven中的pom。裡面記錄了依賴的子產品資訊、版本資訊還有項目的一些基本資訊。網上的一些教程，使用已經搭建好的環境進行講解，當看到package.json檔案的時候，裡面一大堆的東西讓人頭暈，還是從頭一點兒點兒來比較清晰
6、在項目中安裝webpack，以便在項目中可以使用
進入項目所在目，執行如下指令
cnpm install [email protected] --save-dev 複制
這時可以看到在package.json中看到對webpack的依賴資訊了
7、建立項目基本目錄
參照約定，建立以下目錄
/src：存放源碼目錄
/src/assets：存放項目公用的圖檔、js、樣式、模闆、資料的資源
/src/components：存放封裝好的前端元件，比如圖檔上傳元件、樹元件、清單元件等等
/src/routes：存放vue-router的路由配置
/src/views：存放應用的視圖，比如使用者管理頁面（叫頁面不确切，因為我們是單頁面應用，整個系統隻有一個頁面。是以叫html片段更貼切）
/dist：存放建構後的檔案
8、建立表要的檔案
app.vue：這是基于Vue開發的根執行個體。
index.js：負責将app.vue挂載到項目的首頁，也就是index.html上（index.html在哪？後續會介紹）
另外一點兒建議：
對于新手最好不要使用官方提供的指令行工具的方式，建構單頁面工程。
這種方式确實友善快捷，能夠一鍵搭建工程，但這樣隻能讓自己上來一臉茫然，最好還是經曆手動搭建這一過程。
這也是官方的建議
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 建立一個基于 webpack 模闆的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm run dev 複制