導航
由於一直在搞后端開發，對於前端內容的掌握一直停留在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 webpack@4.5.0 -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 webpack@4.5.0 --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