npm install --global @vue/cli

檢視vue 版本

在命令列中輸入命令建立專案

vue create test

Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

default([Vue 2] babel, eslint)：預設勾選 babel、eslint，回車之後直接使用vue2裝包

default([Vue 3] babel, eslint)：預設勾選 babel、eslint，回車之後直接使用vue2裝包

manually：自定義勾選特性配置，選擇完畢之後，才會進入裝包

選擇第 2 種：手動選擇特性，支援更多自定義選項

回車：

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version                       #  選擇vue 版本
 (*) Babel  # es6 轉 es5
 

 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router  #路由
 ( ) Vuex
>(*) CSS Pre-processors #CSS 前處理器，後面會提示你選擇 less、sass、stylus 等
 (*) Linter / Formatter  #程式碼格式校驗，ESLint 程式碼格式校驗
 ( ) Unit Testing
 ( ) E2E Testing

回車；選擇vue的版本

Vue CLI v4.5.13
? Please pick a preset: Manually select features
 
? Check the features needed for your project: Choose Vue version, Babel, Router, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x

回車；是否使用 history 路由模式，這裡輸入 n 不使用

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

回車；選擇 CSS 前處理器，這裡選擇我們熟悉的 Less

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus

回車；選擇校驗工具，這裡選擇 ESLint + Standard config

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

回車：

選擇在什麼時機下觸發程式碼格式校驗：

• Lint on save：每當儲存檔案的時候

• Lint and fix on commit：每當執行 git commit 提交的時候

這裡建議兩個都選上，更嚴謹。

? Pick additional lint features:
 (*) Lint on save
>(*) Lint and fix on commit

回車：

Babel、ESLint 等工具會有一些額外的配置檔案，這裡的意思是問你將這些工具相關的配置檔案寫到哪裡：

• In dedicated config files：分別儲存到單獨的配置檔案

• In package.json：儲存到 package.json 檔案中

這裡建議選擇第 1 個，儲存到單獨的配置檔案，這樣方便我們做自定義配置。

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

回車：

這裡裡是問你是否需要將剛才選擇的一系列配置儲存起來，然後它可以幫你記住上面的一系列選擇，以便下次直接重用。

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

回車：

嚮導配置結束，開始裝包。
安裝包的時間可能較長，請耐心等待......

# 進入你的專案目錄
cd test

# 啟動開發服務
npm run serve