vue-cli3.0 腳手架搭建項目

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