使用VueCLI3.0來做項目有半年時間了，來說一下對VueCLI3.0架構的了解和感受吧。
什麼是VueCLI?
Vuecli俗稱vue腳手架，也就是前台可以進行子產品式開發，可以快速搭建項目原型。Vuecli3.0依賴于nodejs，請先安裝nodejs，版本建議采用版本在 8.0.0 以上否則會出現相容問題，本人使用10.2.0版本。
vue CLI 3.0
為什麼要使用vuecli 3.0?
之前項目都是使用jquery和bootstrap來做項目，基本上沒有什麼架構，隻是自己封裝了一些常用的工具，背景接觸了vuecli 3.0，覺得此架構有很多不錯的地方，它的優勢存在以下幾個方面：
1. 快速原型開發
vuecli3.0支援使用指令直接生成項目，提高效率。
2. GUI可視化界面
可以通過GUI界面進行項目依賴和插件的管理，也可以進行項目的啟動打包，全部可視化。
3. 現代模式
浏覽器配合解析後的es6代碼，使得檔案體積變小，解析效率提高。
4. 支援自動局部更新
開發時支援代碼的熱更新，配合chrome浏覽器，基本不用清理頁面緩存。
5. 使用vue-router
使用vue-router配置路由，可以提高頁面切換的效率，快的飛起。
6. Webpack
內建前端優秀的包管理工具webpack，實作包的自動化管理。
7. 打包
內建了打包工具，實作快速化打包，打包的檔案經過壓縮和混淆，縮小檔案體積，提高代碼安全性。
8. vuejs
包括vuejs一些優勢在裡面，包括資料的雙向綁定、元件化、Virtual DOM、輕量高效、動畫系統等等。
9. 其他
包括一些優秀的第三方插件，例如iview、element ui等等，都特别好用。
VueCLI 3.0項目結構
項目結構
從上到下依次介紹一下目錄中代表的東西是什麼。
1. dist
此目錄為項目打包後的檔案夾，部署時拷貝裡面的内容即可。
2. node_modules
這裡面存放nodejs管理的包，一般不上傳svn，通過npm install進行下載下傳。
3. public
此檔案夾下存在一些公共的資源，包括資料、圖檔、配置等等，此檔案打包時不做處理，原檔案放在打包後檔案中。有些檔案資料需要放在此目錄中，不然項目打包後通路不到資料。
4. src
src目錄裡面存在都是源代碼，包括assets(資源)、componets(元件)、config(配置資訊)、stores(vuex檔案)、views(視圖界面)、App.vue(入口檔案),mian.js(管理初始化資訊)、router.js(管理路由資訊)、store.js(vuex入口)
5. debug.log
debug的日志資訊。
6. package.json
存放管理的包資訊，插件、依賴資訊。
7. vue.config.js
項目的配置資訊全部在這個檔案裡面了，包括打包、代理、服務、webpack管理等等。
總結
總體來說VueCLI3.0是一款非常優秀的前端架構，通過實踐VueCLI3.0還是挺好用的，有興趣的小夥伴們可以嘗試一下，關于使用心得歡迎交流。