Vue-CLI 教程（版本：4.3.1）

一、介紹

官網：https://cli.vuejs.org/zh/guide/

Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統，提供：

• 通過 @vue/cli 實現的交互式的項目腳手架。
• 通過 @vue/cli + @vue/cli-service-global 實現的零配置原型開發。
• 一個運行時依賴 (@vue/cli-service)，該依賴：一個豐富的官方插件集合，集成了前端生態中最好的工具。
  • 可升級；
  • 基於 webpack 構建，並帶有合理的默認配置；
  • 可以通過項目內的配置文件進行配置；
  • 可以通過插件進行擴展。
• 一個豐富的官方插件集合，集成了前端生態中最好的工具。
• 一套完全圖形化的創建和管理 Vue.js 項目的用戶界面。

簡單來講就是可以直接生成一個Vue項目的架構

二、使用Git Bash安裝

前提安裝node.js：https://nodejs.org/zh-cn/

1、全局安裝

npm install -g @vue/cli  --國外服務器下載，受網絡影響大，可能出現異常
cnpm install -g @vue/cli  --淘寶鏡像，服務器在中國，下載比npm更快  官方網址：http://npm.taobao.org

或

yarn global add @vue/cli

2、查看版本（檢查是否安裝成功）

vue -V

3、新建項目

vue create hello-world

出現無法使用上下箭頭切換選擇默認（default）和手動（Manually）

解決辦法：

1. 復制 alias vue='winpty vue.cmd'
2. cd ~
3. vim .bashrc  --進入編輯文件
4. 按字母 i 進入編輯狀態
5. 把剛剛復制的 alias vue='winpty vue.cmd' 粘貼到里面
6. 按 esc 退出編輯
7. 按 :wq 保存編輯操作退出
8. 關閉 Git Bash 然后在打開

按鍵盤上下鍵可以選擇默認（default）還是手動（Manually），如果選擇default會自動生成項目，這里我們繼續手動

 4、選擇配置，看個人項目需求

Vue-CLI 內置支持了8個功能特性，可以多選：使用方向鍵在特性選項之間切換，使用空格鍵（space）選中當前特性，使用 a 鍵切換選擇所有，使用 i 鍵翻轉選項。

對於每一項的功能，此處做個簡單描述：

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

按下 enter 鍵確認選擇，進入下一步

這里是讓選擇在開發 Vue 組件時，要不要使用 class 風格的寫法。為了更方便地使用 TypeScript ，此處選擇 Y

按下 enter 鍵確認選擇，進入下一步

這里是將Babel與TypeScript一起使用，此處選擇 Y

 

按下 enter 鍵確認選擇，進入下一步

這里是對路由器使用歷史記錄模式，此處選擇 Y

按下 enter 鍵確認選擇，進入下一步

這里就是說我們在項目里面需要支持何種動態樣式語言，此處選 Less

按下 enter 鍵確認選擇，進入下一步

這里我選的是ESLint + Prettier

 

按下 enter 鍵確認選擇，進入下一步

這里是選擇語法檢查方式，第一個是保存檢測，第二個是fix和commit的時候檢測，我選擇的是保存就檢測

 

按下 enter 鍵確認選擇，進入下一步

這里是配置文件存放的地方，第一個是獨立文件夾位置，第二個是package.json文件里，我選擇的是獨立文件夾位置

按下 enter 鍵確認選擇，進入下一步

這里是詢問是否記錄這一次的配置，以便下次使用，我選擇的是 Y

按下 enter 鍵確認選擇，進入下一步

等待下載

 三、啟動項目

cd hello-world  --進入項目根目錄
npm run serve  --啟動項目

瀏覽器打開：http://localhost:8080/