vue-cli3.0 腳手架搭建項目的過程詳解

1.安裝vue-cli 3.0

?

1 2 3

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

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

 

2.命令變化

?

1	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：項目名稱）

?

1	vue create project-name

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

default 是 使用默認配置

Manually select features 是 自定義配置

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

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

?

1 2 3 4 5 6

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

?

1 2 3 4 5 6 7 8

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.選擇語法檢查方式，這裏我選擇保存就檢測

?

1 2 3 4 5 6 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這些配置文件放哪，這裏隨便選，我選擇放在獨立文件夾

?

1 2 3 4 5 6 7 8 9

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

?

1 2 3 4 5 6 7 8

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.項目建立好後

?

1 2	cd project-name // 進入項目根目錄 run serve // 運行項目

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

總結

以上所述是小編給你們介紹的vue-cli3.0 腳手架搭建項目的過程詳解，但願對你們有所幫助，若是你們有任何疑問請給我留言，小編會及時回覆你們的。在此也很是感謝你們對腳本之家網站的支持！