1.安裝vue-cli 3.0

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

安裝成功後檢視版本：vue -V(大寫的V)

2.命令變化

vue create --help

用法：create [options] <app-name>

建立一個由 `vue-cli-service` 提供支援的新專案


選項：

  -p, --preset <presetName>       忽略提示符並使用已儲存的或遠端的預設選項
  -d, --default                   忽略提示符並使用預設預設選項
  -i, --inlinePreset <json>       忽略提示符並使用內聯的 JSON 字串預設選項
  -m, --packageManager <command>  在安裝依賴時使用指定的 npm 客戶端
  -r, --registry <url>            在安裝依賴時使用指定的 npm registry (僅用於 npm 客戶端)
  -g, --git [message]             強制 / 跳過 git 初始化，並可選的指定初始化提交資訊
  -n, --no-git                    跳過 git 初始化
  -f, --force                     覆寫目標目錄可能存在的配置
  -c, --clone                     使用 git clone 獲取遠端預設選項
  -x, --proxy                     使用指定的代理建立專案
  -b, --bare                      建立專案時省略預設元件中的新手指導資訊
  -h, --help                      輸出使用幫助資訊
 

3.建立專案

去到指定目錄下建立專案（project-name：專案名稱）

vue create project-name

my-default 是 我原來儲存好的模板；

default 是 使用預設配置

Manually select features 是 自定義配置

4.選擇配置（自定義配置）

5.選擇css預編譯，這裡我選擇less

? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
 
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  SCSS/SASS
  > LESS
  Stylus

6.語法檢測工具，這裡我選擇ESLint + Standard config

? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
 
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

7.選擇語法檢查方式，這裡我選擇儲存就檢測

? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Lint on save // 儲存就檢測
 ( ) Lint and fix on commit // fix和commit時候檢查

8.接下來會問你把babel,postcss,eslint這些配置檔案放哪，這裡隨便選，我選擇放在獨立資料夾

? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 獨立檔案放置
  In package.json // 放package.json裡

9.鍵入N不記錄，如果鍵入Y需要輸入儲存名字，如第一步所看到的我儲存的名字為my-default

? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (Y/n) // 是否記錄一下以便下次繼續使用這套配置。

10.確定後，等待下載依賴模組

11.專案建立好後

cd project-name // 進入專案根目錄
run serve // 執行專案

12.瀏覽器開啟  http://localhost:8080