- vue-cli安裝、創建項目
- 基於vue-cli創建的項目進行開發
- 使用vue-cli圖形化界面搭建項目
- 插件與工具
一、vue-cli簡介、安裝、創建項目
Vue-cli是基於Vue.js進行快速開發的完整系統，提供：
- 通過@vue/cli搭建交互式的項目腳手架。
- 通過@vue/cli + @vue/cli-service-global快速開始零配置原型開發。
- 運行時依賴（@vue/cli-service）,該依賴：
- 可升級；
- 基於webpack構建，並帶有合理的默認配置；
- 可以通過項目內的配置文件進行配置；
- 可以通過插件進行擴展。
- 豐富的官方插件集合，集成了前端生態中最好的工具。
- 完全圖形化的創建和管理Vue.js項目的用戶界面。
這篇博客內容基於vue-cli3.x版本，Vue Cli致力於將Vue生態中的工具基礎標注化，解決了我們開發項目時需要考慮的代碼結構、項目構建和部署、熱加載、代碼單元測試等事情。（以上內容摘自Vue-cli官網：https://cli.vuejs.org/）
1.1安裝
npm install -g @vue/cli
也可以使用cnpm安裝，安裝完成以后使用以下命令來檢查版本以及是否正確：
vue --version
1.2使用vue-cli創建項目
vue create app-vue //app-vue為創建的項目名稱
執行命令后會出現預設項目，也就是項目搭建模板，這里會有之前保存的項目搭建方案，還有一個默認項目搭建方案，最后一個選項是進入自定義配置模式：
注：搭建vue項目時最好使用原生系統控制台搭建，便於使用上下鍵選擇選項，在git的控制台中無法使用上下鍵操作選擇。
選擇Manually select features（手動配置功能）進入自定義配置vue項目環節：
這個配置功能的操作在原生系統控制台中同樣是使用上下鍵來選擇，通過空格鍵確認和取消選項。這些功能配置可以在這里勾選也可以在后期項目創建完成以后再安裝，學過webpack的話就知道這些功能會被統一放到項目的node_modules文件夾下：
- Babel--用來將ES6語法轉換成ES5的js語法
- TypeScript--用來處理TypeScript的模塊
- Progressive web app (PWA) support--用來支持漸進式項目開發搭建的模塊
- Router--用來配置項目路由的模塊
- Vuex--用來處理支持多組件傳值的模塊
- CSS Pre-processors--CSS預處理器
- Linter / Formatter--檢查代碼風格,規范類型
- Unit Testing -- Unit測試方式
- E2E Testing -- E2E測試方式
選擇完以后按下Enter鍵進入下一個環節：
- In dedicated config files--將每個配置文件放到獨立的專用文件中
- In package.json -- 將配置文件統一放到in package.json中（我選擇了這個）
選擇完以后按下Enter鍵進入下一個環節：
- Save this as a preset for future projects? -- 將這個配置作為將來的預設配置（執行vue create ...命令創建項目后的第一步中選擇預設就是這里決定，將來創建項目時會不會有這個預設
輸入y表示設置這個配置作為將來的預設，N則表示不設置。如果選擇y還需要輸入預設的名稱。然后就進入了正式的下載安裝項目環節了：
安裝成功以后：
然后進入項目根目錄下：
cd app-vue
進入到項目根目錄下后執行npm指令開啟項目服務：
npm run serve//開啟開發環境服務
npm run build//開啟生產環境服務
開啟項目服務后可以獲得服務地址：
在瀏覽器地址欄鍵入服務地址，就可以打開項目的初始頁面： http://localhost:8081/；項目的初始頁面是vue項目的默認頁面，接着使用編輯器打開項目，可以看到項目的全部結構：
node_modules //項目依賴的包（項目依賴的系統模塊） public //入口文件夾 favicon.ico //頁面圖標 index.html //入口html文件 src //代碼文件夾 assets //資源文件，一般放一下靜態資源文件（例如：圖片） components //組件 App.vue //程序入口vue組件（根組件） main.js //程序入口js文件 .gitignore //用來過濾一些版本控制的文件，比如node_modules文件夾 babel.config.js //babel配置文件 package-lock.json //用於管理package之間的依賴關系的管理器，詳細可以參考：https://www.cnblogs.com/cangqinglang/p/8336754.html package.json //項目文件，記載一些命令和依賴還有簡要的項目描述信息 README.md //介紹自己這個項目的，可以參照github上star多的項目
二、基於vue-cli創建的項目進行開發
index.html——主入口文件（頁面結構文件）：用於編輯頁面主體HTML結構布局，被抽取作為被打包頁面的結構文本。
assets——資源文件，項目需要的靜態資源文件放到該路徑下。
components——項目組件庫：項目開發的子組件都存放到這個路徑下。
App.vue——程序組入口組件（根組件）：在組件內使用<template>定義組件模板、使用<script>編輯組件實現邏輯、使用<style>編輯組件樣式。
main.js——程序入口JS文件：在這個文件中實現VUE實例與結構文本index.html的DOM綁定。
注：以上只是描述了vue-cli創建項目時自動生成的代碼模板結構，vue-cli構建項目應用了webpack的一切皆模塊的核心理念，在了解vue-cli之前最好具備webpack模塊化項目經驗，基於webpack的模塊化結合vue-cli給出的手腳架模板進行開發，當然在復雜的項目生產中必定會根據自身需要進行相應的調整。
2.1在main.js文件中基於vue的router(路由)將各個文件(模塊)轉換成對象，並最后被main.js文件中創建的vue實例的對應屬性引用成為自身的一部分，實現vue實例的構建。
2.2獨立運行vue組件：
npm install -g @vue/cli-service-global//在全局安裝獨立運行vue組件的插件（建議使用cnpm下載）
然后進入到組件所在的目錄，使用以下命令開啟組件的獨立服務（指令：vue serve 組件文件名稱[含后綴]）：
vue serve HelloWorld.vue //開啟模板自動生成的HelloWorld.vue組件的獨立服務
開啟獨立組件服務同樣會生成一個服務連接，通過接這個連接就可以訪問這個獨立組件：
通過獨立運行組件可以和方便的測試單個組件，以上就是關於基於vue-cli（腳手架）搭建vue項目的一些開發基礎內容，后期更多復雜的開發操作會有更詳細的博客解析。
三、使用vue-cli圖形化界面搭建項目
使用命令在工作區間開啟vue-cli圖形化界面搭建項目：vue ul
vue ui
執行命令后會在默認瀏覽器上打開一個圖形化搭建項目的連接界面：
如果沒有自動開啟這個頁面的話可以使用控制台打印出來的連接手動進入這個界面：
進入界面后點擊創建開始創建vue項目：
點擊：在此創建新的項目進入創建項目界面：
第一步需要配置項目根路徑文件夾名稱、包管理工具、是否覆蓋已有相同的根目錄文件夾、是否初始化git創庫。配置好以后進入預設界面：
預設界面會列出之前預設的項目配置，可以通過勾選預設直接使用之前保存的項目配置，這里我選擇手動配置項目，與之前的控制台配置一樣給出了一系列的功能配置供我們選擇：
這里與之前控制台的選項一致就不展示了，選擇好以后下一步同樣是問我們是否保存配置的預設，根據自己的需求勾選即可，如果需要保存預設同樣需要配置預設的名稱，最后確認系統就正式的進入了自動構建項目階段（下載項目配置模塊，安裝。。。）
安裝完成以后，控制台呈現的結果與使用命令安裝是一致的，並且瀏覽器界面會跳轉到下面這個頁面：
也有不能跳轉到這個頁面的情況，這時候可以使用我們一開始進入UI配置頁面的首頁使用導入的方式來導入配置好的項目：
然后在這個界面還可以繼續配置項目，后續的配置同樣采用vue ui開啟這個配置頁面，使用導入進入到指定的項目進行管理操作。最后還可以使用在可視化界面啟動項目（點擊任務）：
以上就是使用可視化界面創建和管理項目的全部過程。
最后關於如何刪除vue預設配置模板：C盤：——用戶文件夾——.vuerc(有可能被隱藏)：
找到.vuerc文件使用編輯器打開這個文件：
以上就是預設的配置信息，可以通過編輯器刪除配置信息實現刪除預設。
在使用vue create 項目名稱 來創建項目時進入預設界面就沒有了相關的預設配置：
這里就只剩下默認預設和自定義配置兩個選項了。
同樣在這個用戶文件夾下還有一個vue-cli-ui文件夾，這個文件夾保存了vue ui的管理記錄，當我們執行vue ui命令時，會通過這個記錄直接進入到上一次項目的管理界面，但有時候我們需要進入的是vue ui的管理首頁，在這個文件夾下有一個db.json文件，用編輯器打開清空里面的數據：
再次使用vue ui命令就可以進入到項目管理首頁了。
四、插件與工具
在vue-cli3之前安裝vue插件或者工具都采用npm install 插件名稱 -S來安裝，在vue-cli3中可以使用vue add這個命令來安裝插件，比如我下一篇博客解析的vue-router（vue路由）就可以通過以下命令來下載安裝：
vue add router
更多詳細的插件與工具安裝可以了解官方文檔：https://cli.vuejs.org/zh/guide/plugins-and-presets.html
這里針對一些可能需要深入了解的部分進行解析：
其實vue-router沒有自己的插件，包括vuex也是，但vue add仍然可以使用。下載安裝插件的完整操作方式應該按照下面這個示例來使用：
vue add @vue/cli-plugin-eslint
但一般情況下我們可以采用這種簡寫的方式：
vue add @vue/eslint
上面這個命令@vue/eslint會被解析為完整的包名@vue/cli-plugin-eslint,然后從npm中調用它的生成器安裝它。
如果不帶@vue前綴，該命令會換作解析一個unscoped的包，例如下一命令會按照第三方插件vue-cli-plugin-apollo:
vue add apollo //安裝並調用vue-cli-plugin-apollo
注意：vue add命令是為了安裝和調用Vue cli插件，並不能替代npm包管理工具，普通的npm包依然需要使用npm來進行管理。