vue進階：基於vue-cli建立項目（搭建手腳架）

• vue-cli安裝、建立項目
• 基於vue-cli建立的項目進行開發
• 使用vue-cli圖形化界面搭建項目
• 插件與工具

 1、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之間的依賴關係的管理器，詳細能夠參考：http://www.javashuo.com/article/p-hegtsdnd-cc.html
package.json       //項目文件，記載一些命令和依賴還有簡要的項目描述信息
README.md          //介紹本身這個項目的，能夠參照github上star多的項目

 2、基於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項目的一些開發基礎內容，後期更多複雜的開發操做會有更詳細的博客解析。

 3、使用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命令就能夠進入到項目管理首頁了。

 4、插件與工具

 在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來進行管理。