Vue技術點整理-Vue CLI安裝詳解

 一，腳手架安裝

Node 版本要求

Vue CLI 須要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你能夠使用 nvm 或 nvm-windows 在同一臺電腦中管理多個 Node 版本。

1，全局安裝Vue CLI

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

安裝以後，使用如下命令查看安裝是否正確

vue --version

2，快速建立一個CLI項目

vue create cli_test

此時會出現如下安裝選項：

• 選擇安裝選項

PS E:\workspace\demo> vue create cli_test

Vue CLI v3.9.2
? Please pick a preset:
  useLessDefault (vue-router, vuex, less, babel, eslint) //上一次我保存的默認配置，第一次是沒有的
  default (babel, eslint) //默認配置建立
> Manually select features //自定義配置選項，建議選擇

• 選擇安裝插件

注：按上、下健切換選項，按空格鍵選擇選項，按i鍵反選

Vue CLI v3.9.2
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to t
? Check the features needed for your project: (Press <space> to select, <a> to t
? Check the features needed for your project: (Press <space> to select, <a> to t
? Check the features needed for your project: (Press <space> to select, <a> to t
? Check the features needed for your project:
 (*) Babel // 是否使用babel作轉義
 ( ) TypeScript //  是否使用class風格的組件語法
 ( ) Progressive Web App (PWA) Support // 支持PWA
 (*) Router // 安裝使用路由Router
 (*) Vuex // 安裝使用Vuex狀態管理，簡單項目不建議使用安裝
 (*) CSS Pre-processors // 選擇CSS 預處理類型
 (*) Linter / Formatter // 選擇Linter / Formatter規範類型
>(*) Unit Testing // 選擇Unit測試方式
 ( ) E2E Testing // 選擇E2E測試方式

• 選擇路由HTML5 history 模式

注：能夠先不選擇，後期若是用到，再手動添加便可

Vue CLI v3.9.2
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to t
? Check the features needed for your project: (Press <space> to select, <a> to t
? Check the features needed for your project: (Press <space> to select, <a> to t
? Check the features needed for your project: (Press <space> to select, <a> to t
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce

ssors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback
? Use history mode for router? (Requires proper server setup for index fallback

in production) (Y/n) n

• 選擇css預處理

注：根據本身的開發習慣選擇預處理

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
? 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代碼驗證規則

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + 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 (requires Git)// fix和commit時候檢查

• 選擇單元測試組件

? Pick a unit testing solution:
  Mocha + Chai
> Jest

• 選擇是否要把Bable、PostCSS、ESlint等放到一個單獨的文件裏進行管理

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arro

w keys)
> In dedicated config files
  In package.json

• 是否要保存當前的選擇配置項，之後安裝時能夠快速安裝使用

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

• 輸入自定義的配置名稱

? Save this as a preset for future projects? Yes
? Save preset as: myCli

• 回車，開始安裝... 出現如下內容表示安裝完成！

added 59 packages from 101 contributors, updated 3 packages, moved 13 packages a
nd audited 42942 packages in 30.434s
found 64 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
⚓  Running completion hooks...

�  Generating README.md...

�  Successfully created project cli_test.
�  Get started with the following commands:

 $ cd cli_test
 $ npm run serve

• 安裝完成後的目錄結構以下：

• 啓動項目

cd cli_test

npm run serve

瀏覽器輸入http://localhost:8080

• 部署打包項目

npm run build

執行後，會多一個dist的目錄，直接把這個目錄放到服務器Nginx下就能夠訪問了

 

CLI默認配置只是簡單的項目框架，更多配置、組件封裝請參考我其它的文章！