前言：在閱讀此文章前請(qǐng)先確保電腦已安裝node，且npm功能正常，此文適合cli2.x以上版本創(chuàng)建項(xiàng)目，例cli3.x或者cli4.x

1、安裝cli

1.1、 Vue-cli 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經(jīng)全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你需要先打開cmd命令行窗口通過(guò)以下命令卸載舊版

npm uninstall vue-cli -g
// or 或者
//安裝了yarn的小伙伴也可以用 yarn global remove vue-cli 進(jìn)行卸載
yarn global remove vue-cli 

1.2、 vue-cli 新版安裝
如果你是從node中文官網(wǎng)http://www.nodejs.com.cn/安裝的10.14.2長(zhǎng)期支持版 建議安裝cli時(shí)選擇不大于@4.5.13版本，不要刻意去升級(jí)node，否則npm隨node版本升高對(duì)于老項(xiàng)目的npm支持性不友好，下載公司項(xiàng)目依賴的時(shí)候會(huì)因npm版本不對(duì)應(yīng)問(wèn)題各種報(bào)錯(cuò)

npm install -g @vue/cli
// or 或者
yarn global add @vue/cli

注意：node版本<=10.14.2的請(qǐng)執(zhí)行以下命令安裝指定版本cli

npm install -g @vue/cli@4.5.13
// or 或者
yarn global add @vue/cli@4.5.13

否則直接執(zhí)行第二步創(chuàng)建項(xiàng)目命令會(huì)有以下報(bào)錯(cuò)

image.png

2、創(chuàng)建項(xiàng)目

2.1、vue create 你的項(xiàng)目名 （創(chuàng)建項(xiàng)目時(shí)，如需在指定目錄下創(chuàng)建請(qǐng)先cd進(jìn)對(duì)應(yīng)目錄，例如我想在D盤zheheWeb下創(chuàng)建就可以cd /D D:/zheheWeb）

vue create my-project
//or 或者
vue ui

2.2、 這里我們vue create "項(xiàng)目名" 后，選擇手動(dòng)創(chuàng)建Manually select features（手動(dòng)創(chuàng)建更靈活，可以自主選擇要或不要安裝某些依賴），cli3.x和4.x本質(zhì)上沒有太大區(qū)別，都有默認(rèn)和手動(dòng)選擇

Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)  //請(qǐng)選擇一個(gè)預(yù)設(shè)（使用方向鍵）
  Default ([Vue 2] babel, eslint)   //默認(rèn)Vue2，并安裝babel，eslint
  Default (Vue 3) ([Vue 3] babel, eslint)   //默認(rèn)Vue3，并安裝babel，eslint
> Manually select features  //手動(dòng)選擇功能

2.3、配置項(xiàng)勾選，空格鍵選中和非選中，a 全選，i 反選，下面是我選的配置項(xiàng) 選完按回車鍵Enter確定進(jìn)入下一步

 (*) Choose Vue version  //選擇vue版本
 (*) Babel  //Babel-Es6語(yǔ)法轉(zhuǎn)換
 ( ) TypeScript  //Ts，js超集
 ( ) Progressive Web App (PWA) Support  //PWA漸進(jìn)式Web應(yīng)用程序。
 (*) Router  //Router  vue-router 。
 (*) Vuex  //Vuex  vuex 。
 (*) CSS Pre-processors  //CSS 預(yù)處理器。
>(*) Linter / Formatter  //代碼風(fēng)格檢查和格式化
 ( ) Unit Testing  //單元測(cè)試（unit tests）
 ( ) E2E Testing  //E2E 測(cè)試

2.4、選擇一個(gè)Vue.js版本，你想用它開始項(xiàng)目(使用方向鍵) 這里我選擇 2.x版本按Enter進(jìn)入下一步

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x

2.5、路由器使用 history 模式?(需要適當(dāng)?shù)姆?wù)器設(shè)置以便在生產(chǎn)中實(shí)現(xiàn)索引回退)(Y/n) Y是 n否，輸入Y按Enter進(jìn)入下一步

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

2.6、選擇一個(gè)CSS預(yù)處理器(默認(rèn)支持PostCSS, Autoprefixer和CSS模塊):(使用方向鍵) 如下所示選擇Sass/SCSS (with dart-sass) 按Enter進(jìn)入下一步

? 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

2.7、選擇linter / formatter配置:(使用方向鍵) 如下所示選擇SLint with error prevention only 按Enter進(jìn)入下一步

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

2.8、選擇額外的lint功能:(按<空格>選擇，<a>切換全部，<i>反轉(zhuǎn)選擇) 如下所示選擇Lint on save 按Enter進(jìn)入下一步

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

2.9、你喜歡把配置Babel, ESLint等放在哪里? 如下所示選擇In package.json 按Enter進(jìn)入下一步

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

last、將此保存為未來(lái)項(xiàng)目的預(yù)設(shè)?(y / N)y是 N否 （輸入y后會(huì)記住當(dāng)前選擇配置模板，以后生成新項(xiàng)目都按此配置） 輸入N 按Enter進(jìn)入下一步開始創(chuàng)建項(xiàng)目

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

最后選完如下圖所示

image.png

等待下載完依賴后如圖所示就代表項(xiàng)目創(chuàng)建成功了

image.png

3、項(xiàng)目創(chuàng)建完成 cd my-project 進(jìn)入項(xiàng)目目錄 運(yùn)行npm run serve命令 出現(xiàn)以下頁(yè)面至此大功告成

image.png