Vue-Cli & VueDevTools 安裝

1. 前言

本小節(jié)我們會(huì)介紹 Vue 腳手架工具 Vue-Cli 以及調(diào)試工具 VueDevTools 的安裝和使用。

2. 什么是 Vue-Cli

vue-cli 是由 Vue 提供的一個(gè)官方 cli，專門為單頁面應(yīng)用快速搭建繁雜的腳手架。它是用于自動(dòng)生成 vue.js+webpack 的項(xiàng)目模板。

2.1 安裝 Cli

// npm 安裝
npm install -g @vue/cli  

// yarn 安裝
yarn global add @vue/cli

查看是否安裝成功：

vue -V
// 正確顯示版本號(hào)

2.2 初始化項(xiàng)目

vue create vue-learn

回車之后會(huì)出現(xiàn)以下畫面

Vue CLI v3.9.3
┌────────────────────────────┐
│  Update available: 3.10.0  │
└────────────────────────────┘
? Please pick a preset: (Use arrow keys)
? default (babel, eslint) 
  Manually select features 

• default (babel, eslint) 默認(rèn)套餐，提供 babel 和 eslint 支持。
• Manually select features 自己去選擇需要的功能，提供更多的特性選擇。比如如果想要支持 TypeScript ，就應(yīng)該選擇這一項(xiàng)。
• 使用上下方向鍵來選擇需要的選項(xiàng)。
• 使用 manually 來創(chuàng)建項(xiàng)目，選中之后會(huì)出現(xiàn)以下畫面。

Vue CLI v3.9.3
┌────────────────────────────┐
│  Update available: 3.10.0  │
└────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
?? Babel
 ? TypeScript
 ? Progressive Web App (PWA) Support
 ? Router
 ? Vuex
 ? CSS Pre-processors
 ? Linter / Formatter
 ? Unit Testing
 ? E2E Testing

依然是上下鍵選擇，空格鍵選中。
對(duì)于每一項(xiàng)的功能，此處做個(gè)簡單描述：

• TypeScript 支持使用 TypeScript 書寫源碼。
• Progressive Web App (PWA) Support PWA 支持。
• Router 支持 vue-router 。
• Vuex 支持 vuex 。
• CSS Pre-processors 支持 CSS 預(yù)處理器。
• Linter / Formatter 支持代碼風(fēng)格檢查和格式化。
• Unit Testing 支持單元測(cè)試。
• E2E Testing 支持 E2E 測(cè)試。

第一個(gè) typescript 暫時(shí)還不會(huì)，先不選，這次選擇常用的。

? Babel
? TypeScript
? Progressive Web App (PWA) Support
? Router
? Vuex
? CSS Pre-processors
? Linter / Formatter
?? Unit Testing
? E2E Testing

回車之后讓選擇 CSS 處理器，這里選擇 Less。

? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): (Use arrow keys)
? Sass/SCSS (with dart-sass) 
 Sass/SCSS (with node-sass) 
 Less 
 Stylus 

接下來選擇 eslink，我選擇了 eslink+prettier：

? Pick a linter / formatter config: 
 ESLint with error prevention only 
 ESLint + Airbnb config 
 ESLint + Standard config 
? ESLint + Prettier

選擇代碼檢查方式，第一個(gè)是保存的時(shí)候就檢查，第二個(gè)是提交上傳代碼的時(shí)候才檢查。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
?? Lint on save
 ? Lint and fix on commit

選擇單元測(cè)試，這個(gè)我不懂，隨便先選個(gè) jest：

? Pick a unit testing solution: 
  Mocha + Chai 
? Jest 

配置文件存放的地方，選擇 package.json：

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 
  In dedicated config files 
? In package.json 

是否保存這次配置，方便下次直接使用，一般都是選擇 Y。

? Save this as a preset for future projects? (y/N) 

配置完成之后就開始創(chuàng)建一個(gè)初始項(xiàng)目了：

啟動(dòng)

cd vue-learn
npm run serve

3. 什么是 VueDevTools

vue-devtools 是一款基于 chrome 游覽器的插件，用于調(diào)試 vue 應(yīng)用，這可以極大地提高我們的調(diào)試效率。

3.1 VueDevTools 安裝

1. chrome 商店直接安裝
   vue-devtools 可以從 chrome 商店直接下載安裝。我們可以打開 chrome 商店，搜索 vue-dev-tools，點(diǎn)擊 “添加至 chrome” 即可。

2. 手動(dòng)安裝

   1. 將 vue-devtools 克隆到本地。

      git clone https://github.com/vuejs/vue-devtools.git
      

   2. 安裝項(xiàng)目所需要的安裝包

      npm install
      

   3. 編譯項(xiàng)目文件

      npm run build
      

   4. 添加至 chrome 瀏覽器

      1、游覽器輸入地址“chrome://extensions/” 進(jìn)入擴(kuò)展程序頁面，
      2、點(diǎn)擊“加載已解壓的擴(kuò)展程序...”按鈕
      3、選擇vue-devtools>shells下的chrome文件夾。
      

3.2 VueDevTools 的使用

當(dāng)我們添加完 vue-devtools 擴(kuò)展程序之后，我們?cè)谡{(diào)試 vue 應(yīng)用的時(shí)候，chrome 開發(fā)者工具中會(huì)看一個(gè) vue 的一欄，點(diǎn)擊之后就可以看見當(dāng)前頁面 vue 對(duì)象的一些信息。vue-devtools 使用起來還是比較簡單的，上手非常地容易。

4. 小結(jié)

在本小節(jié)我們介紹了什么是 vue-cli，如何安裝 vue-cli。介紹了調(diào)試工具 VueDevTools 的安裝和使用。