vue新出了 vue cli 3，并直接改名為 @vue/cli，今天就來盤他，
首先介紹等啰里啰嗦的就不寫了，貼個link吧，
- Vue CLi3 github
- Vue CLi web
要是想先了解下 Vue Cli 3 的新特性 和 與 2 的區別，可以先看下我這篇：
Vue Cli 3 新特性 與 2 的區別
安裝
一、找個地方新建檔案夾
二、用cmd進入檔案夾（這里最好用cmd，不要用 git bash，不然之后的選擇很麻煩）
三、全域 Install Vue Cli 3
npm install -g @vue/cli
// OR
yarn global add @vue/cli
四、check 版本
vue --version
五、創建一個專案(多圖預警)
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
六、配置好了，開始安裝
這里他會直接把 node_modules 直接安裝好，
七、安裝完畢，進入專案，運行命令啟動服務
cd hello-world
npm run serve
// OR
yarn serve
八、同時使用Vue Cli2
Vue CLI >= 3 和舊版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆寫了，如果你仍然需要使用舊版本的 vue init 功能，你可以全域安裝一個橋接工具：
npm install -g @vue/cli-init
# `vue init` 的運行效果將會跟 `[email protected]` 相同
vue init webpack my-project
覺得有幫助的小伙伴右上角點個贊~
覺得有幫助的小伙伴點個贊~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/69574.html
標籤：其他