Vue Cli 3 初體驗（全面詳解）

vue新出了 vue cli 3，並直接更名爲 @vue/cli，今天就來盤他。

首先介紹等囉裏囉嗦的就不寫了，貼個link吧。

• Vue CLi3 github
• Vue CLi web

要是想先了解下 Vue Cli 3 的新特性 和 與 2 的區別，能夠先看下我這篇：

Vue Cli 3 新特性 與 2 的區別

---

安裝

1、找個地方新建文件夾

2、用cmd進入文件夾（這裏最好用cmd，不要用 git bash，否則以後的選擇很麻煩）

3、全局 Install Vue Cli 3

npm install -g @vue/cli
// OR
yarn global add @vue/cli

4、check 版本

vue --version

5、建立一個項目(多圖預警)

vue create hello-world

先說一下，個人vue是3.8.4版本的。

• 首先會彈出 是否須要 taobao 鏡像，我選n
• 而後會彈出以下界面：

此處有兩個選擇：

• default (babel, eslint) 默認套餐，提供 babel 和 eslint 支持。
• Manually select features 本身去選擇須要的功能，提供更多的特性選擇。好比若是想要支持 TypeScript ，就應該選擇這一項。

可使用上下方向鍵來切換選項。若是隻須要 babel 和 eslint 支持，那麼選擇第一項，就完事了，靜靜等待 vue 初始化項目。

• 若是想要更多的支持，就選擇第二項：切換到第二項，按下 enter 鍵選中，彈出以下界面：

vue-cli 內置支持了8個功能特性，能夠多選：使用方向鍵在特性選項之間切換，使用空格鍵選中當前特性，使用 a 鍵切換選擇全部，使用 i 鍵翻轉選項。

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

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

那麼基於開發常見的項目，同時兼顧項目健壯性的原則，本次選擇以下特性支持：

• 首先 Babel 必選，轉換ES6語法。
• TypeScript 和 PWA 我這裏用不到因此不選。
• Router 必選沒道理。
• Vuex 能夠後用到再加，也能夠直接選
• CSS Pre-processors 基本上必選吧（LESS/SASS/Stylus）
• Linter / Formatter 良好的風格規範是必須的，基本必選。
• Unit Testing 和 E2E Testing 我這裏用不到因此不選。

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

接下來就是詳細選擇了：

1. 是否使用history模式的router，這裏選n，採用hash模式

2.選擇一種css預處理語言，這裏我選擇LESS(忘截圖了)

3. 選擇linter配置 我選第三個ESLint + Standard config

• ESLint with error prevention only——只檢測錯誤。
• ESLint + Airbnb config——獨角獸公司的Airbnb，有人評價說「這是一份最合理的JavaScript編碼規範」，它幾乎涵蓋了JavaScript的各個方面。
• ESLint + Standard config——standardJs一份強大的JavaScript編碼規範，自帶linter和自動代碼糾正。沒有配置。自動格式化代碼。能夠在編碼早期發現規範問題和低級錯誤。
• ESLint Prettier—— Prettier 做爲代碼格式化工具，可以統一整個團隊的代碼風格。

4. 選擇校驗的時機，我選擇第一項

• 保存的時候校驗
• 提交的時候校驗

5. 接下來這裏是詢問怎麼存放babel, postcss, eslint等的配置文件，我選擇第一項，單獨存放

• 單獨存放
• 集成在package.json

6. 詢問是否保存當前配置，我選擇n

7. 選擇一個包管理器來安裝，這個看本身喜愛吧，我選擇yarn

若是選擇了 單元測試 還會有選擇單元測試的配置，通常Mocha + Chai

6、配置好了，開始安裝

這裏他會直接把 node_modules 直接安裝好。

7、安裝完畢，進入項目，運行命令啓動服務

cd hello-world
npm run serve
// OR
yarn serve

8、同時使用Vue Cli2

Vue CLI >= 3 和舊版使用了相同的 vue 命令，因此 Vue CLI 2 (vue-cli) 被覆蓋了。若是你仍然須要使用舊版本的 vue init 功能，你能夠全局安裝一個橋接工具：

npm install -g @vue/cli-init
# `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同
vue init webpack my-project

---

以爲有幫助的小夥伴右上角點個贊~

以爲有幫助的小夥伴點個贊支持下~