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

這篇文章主要介紹了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>

創(chuàng)建一個由 `vue-cli-service` 提供支持的新項目

選項：

  -p, --preset <presetName>       忽略提示符并使用已保存的或遠(yuǎn)程的預(yù)設(shè)選項
  -d, --default                   忽略提示符并使用默認(rèn)預(yù)設(shè)選項
  -i, --inlinePreset <json>       忽略提示符并使用內(nèi)聯(lián)的 JSON 字符串預(yù)設(shè)選項
  -m, --packageManager <command>  在安裝依賴時使用指定的 npm 客戶端
  -r, --registry <url>            在安裝依賴時使用指定的 npm registry (僅用于 npm 客戶端)
  -g, --git [message]             強(qiáng)制 / 跳過 git 初始化，并可選的指定初始化提交信息
  -n, --no-git                    跳過 git 初始化
  -f, --force                     覆寫目標(biāo)目錄可能存在的配置
  -c, --clone                     使用 git clone 獲取遠(yuǎn)程預(yù)設(shè)選項
  -x, --proxy                     使用指定的代理創(chuàng)建項目
  -b, --bare                      創(chuàng)建項目時省略默認(rèn)組件中的新手指導(dǎo)信息
  -h, --help                      輸出使用幫助信息

3.創(chuàng)建項目

去到指定目錄下創(chuàng)建項目（project-name：項目名稱）

vue create project-name

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

default 是 使用默認(rèn)配置

Manually select features 是 自定義配置

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

5.選擇css預(yù)編譯，這里我選擇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這些配置文件放哪，這里隨便選，我選擇放在獨(dú)立文件夾

 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 // 獨(dú)立文件放置
 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) // 是否記錄一下以便下次繼續(xù)使用這套配置。

10.確定后，等待下載依賴模塊

11.項目創(chuàng)建好后

cd project-name // 進(jìn)入項目根目錄
run serve // 運(yùn)行項目

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue-cli3.0腳手架怎么搭建項目”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!