03-Vue.js環境準備-使用vue-cli快速搭建專案(cli3+)-有解無憂

一、文章大綱

二、安裝環境

本文基于如下的環境進行試驗的：

Windows 10中文64位專業版，
v12.18.3版本的Node.js，
@vue/cli 4.5.4的Vue.js和cli，

三、安裝vue-cli

使用npm全域安裝vue-cli：

npm install -g @vue/cli

可以使用如下的創建專案的命令，查看vue cli的安裝情況：

按照上面的提示，先卸載之前的版本，然后安裝新的版本，

安裝成功后，如果要查看安裝的cli的版本，可以執行命令：

node -V

溫馨提醒：-V是大寫的V，而不是小寫的v，

四、創建專案

在命令列執行如下命令：

vue create hello

控制臺會輸出如下的內容：

此處有三個選擇：

Default ([Vue 2] babel, eslint)：使用Vue2創建專案，默認配置，提供了babel和eslint的支持，
Default (Vue 3 Preview) ([Vue 3] babel, eslint)：使用Vue3預覽版創建專案，默認配置，提供了babel和eslint的支持，
Manually select features：手動選擇需要的功能，提供更多的特性選擇，可以根據實際專案的需要進行選擇所需的特性配置，

可以使用上下方向鍵來切換選項，咱們快速過一下前2個選項的效果，然后再詳細介紹第3個選項的操作，

1、Default ([Vue 2] babel, eslint)

如上圖所示，咱們選擇第1個選項，然后按下回車鍵，我們不需要再做其他任何操作，然后就可以將專案創建完成，命令執行的情況如下圖所示：

這樣，使用第1個選項創建專案就算完成了，我們再試試第2個選項，

2、Default (Vue 3 Preview) ([Vue 3] babel, eslint)

如上圖所示，這次選擇的是第2個選項，然后按下回車鍵，我們仍然不需要再做其他任何操作，然后就可以將專案創建完成，命令執行的情況如下圖所示：

這樣，使用第2個選項創建專案就算完成了，
可以看到，使用前2個選項創建專案是比較簡單的，不需要我們去做過多的配置，基本上就按照默認的配置來創建專案了，如果我們希望自己定義專案的各項配置資訊，那么就需要使用第3個選項來創建專案了，

3、Manually select features

如上圖所示，這次選擇的是第3個選項，然后按下回車鍵，命令列會顯示如下的內容：

vue-cli內置支持了10個功能特性，對于每一項的功能，此處做個簡單描述：

Choose Vue version：選擇Vue的版本，
Babel：是否使用babel，
TypeScript：支持使用TypeScript撰寫原始碼，
Progressive Web App(PWA)：是否支持漸進式網頁應用（PWA），
Router：是否支持vue-router，
Vuex：是否支持vuex，
CSS Pre-processors：是否支持CSS前處理器，
Linter/Formatter：是否支持代碼風格檢查和格式化，
Unit Testing：是否支持單元測驗，
E2E Testing：是否支持E2E測驗，

上述10個選項可以多選，具體操作：使用方向鍵在特性選項之間切換，使用空格鍵選中當前特性，使用a鍵切換選擇所有，使用i鍵反選（說明：會將選中的選項取消選中，將沒有選中的選項選中），
可以根據專案的需要選擇上述這些選項，首先需要選擇需要的配置項，為了演示目的，我們將所有的選項都選中，如下圖所示：

如上圖所示，10個配置項都選中了，然后按下鍵盤上的回車鍵，開始對每個選中配置項進行具體的配置，命令列中會按著順序讓你對每個配置項進行配置，沒有選中的配置項不會出現具體的配置界面，按照我們上述的選擇，回車后，首先看到的第1個頁面如下圖所示：

Choose a version of Vue.js that you want to start the project with (Use arrow keys)
翻譯：選擇我們想在專案中使用的Vue.js的版本，使用鍵盤的上下鍵進行選擇，
這里咱們就選擇2.x吧，然后按下回車鍵，如下圖所示：

Use class-style component syntax? (Y/n)
翻譯：是否使用class風格的組件語法？
這里是讓選擇在開發Vue組件時，要不要使用class風格的寫法，如果需要則在命令列輸入大寫Y，不需要則輸入小寫n，為了更方便地使用TypeScript，此處選擇Y，然后按下回車鍵，

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
翻譯：在TypeScript中使用babel，如果使用現代模式、代碼注入polyfills、替換JSX，則為必須項
如果實在搞不清楚具體是什么意思，可以先不用管，直接選擇Y，進入下一步：

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
翻譯：路由器使用歷史記錄模式?（需要適當的服務器設定，以便在生產環境中進行索引回退）
根據專案情況，如果需要則在命令列輸入大寫Y，不需要則輸入小寫n，此處我們選擇Y，按下回車鍵，

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
翻譯：選擇一種CSS前處理器，默認支持PostCSS、Autoprefixer和CSS模塊，
這里提供了4個選項，通過鍵盤上下鍵進行選擇，

Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus

這幾個選項的具體情況稍后我們用專門的文章進行說明，此處我們就先選擇《Less》選項，然后按下回車鍵，

Pick a linter / formatter config: (Use arrow keys)
翻譯：選擇代碼檢查和格式化配置，

ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
TSLint (deprecated)

這幾個選項的具體情況稍后我們用專門的文章進行說明，此處我們就先選擇《ESLint + Standard config》選項，然后按下回車鍵，

Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
翻譯：選擇附加的語法檢查配置，可以按下空格鍵選中選項，按下a鍵選擇所有，按下i鍵進行反選，即選中的取消選中，沒有選中的選中，

Lint on save：保存時檢查，
Lint and fix on commit：提交時檢查和修復，

根據專案情況進行選擇，此處我們將其全部選中，如下圖所示：

按下回車鍵，然后命令列內容如下圖所示：

Pick a unit testing solution: (Use arrow keys)
翻譯：選擇單元測驗工具

Mocha + Chai
Jest

這兩種測驗工具我們也在稍后的文章中進行詳細介紹，此處可以選擇《Jest》，然后按下回車鍵，

Pick an E2E testing solution
翻譯：選擇點對點測驗方案，

Cypress (Chrome only)
Nightwatch (WebDriver-based)
WebdriverIO (WebDriver/DevTools based)

這兩種測驗工具我們也在稍后的文章中進行詳細介紹，此處可以選擇《WebdriverIO (WebDriver/DevTools based)》，然后按下回車鍵，

Pick browsers to run end-to-end test on (Press <space> to select, <a> to toggle all, <i> to invert selection)
翻譯：選擇進行點對點測驗的瀏覽器，可以按下空格鍵選中選項，按下a鍵選擇所有，按下i鍵進行反選，即選中的取消選中，沒有選中的選中，
根據專案情況進行選擇，此處我們將其全部選中，如下圖所示：

按下回車鍵，然后命令列內容如下圖所示：

Where do you prefer placing config for Babel, ESLint, etc.?
翻譯：你更喜歡把Babel、ESLint等的配置放到哪里？

In dedicated config files：在獨立的組態檔中，
In package.json：統一放在package.json檔案中，

根據專案情況進行選擇，此處我們選擇《In package.json》選項，如下圖所示：

Save this as a preset for future projects? (y/N)
翻譯：是否將此保存為將來專案的預置？
如果保存的話，將來在創建專案的時候，就可以按照該配置進行創建了，這個大家可以自行嘗試，
如果需要保存，在輸入小寫y，不需要的話輸入大寫N（一路下來都是大寫Y小寫n，這里畫風突變成了小寫y大寫N，-_-），此處我們選擇不保存，輸入大寫N，按下回車鍵，如下圖所示：

如上圖示，這就開始按照咱們的配置進行專案的創建了，坐等結果了，

最后，輸出了一大堆的東西，如果中間沒有出現錯誤的話，那咱們的專案就創建成功了，可以進行后續的操作了，

貼上控制臺輸出的內容：

PS C:\Projects\cli4> vue create hello
 
 
Vue CLI v4.5.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jest
? Pick an E2E testing solution: WebdriverIO
? Pick browsers to run end-to-end test on Chrome, Firefox
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
 
 
Vue CLI v4.5.4
?  Creating project in C:\Projects\cli4\hello.
�  Initializing git repository...
??  Installing CLI plugins. This might take a while...
 
 
> fibers@4.0.3 install C:\Projects\cli4\hello\node_modules\fibers
> node build.js || nodejs build.js
 
`win32-x64-72` exists; testing
Binary is fine; exiting
 
> deasync@0.1.20 install C:\Projects\cli4\hello\node_modules\deasync
> node ./build.js
 
`win32-x64-node-12` exists; testing
Binary is fine; exiting
 
> yorkie@2.0.0 install C:\Projects\cli4\hello\node_modules\yorkie
> node bin/install.js
 
setting up Git hooks
done
 
 
> core-js@2.6.11 postinstall C:\Projects\cli4\hello\node_modules\babel-runtime\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
 
 
> core-js@3.6.5 postinstall C:\Projects\cli4\hello\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
 
 
> ejs@2.7.4 postinstall C:\Projects\cli4\hello\node_modules\webpack-bundle-analyzer\node_modules\ejs
> node ./postinstall.js
 
added 2117 packages from 1326 contributors in 71.254s
 
75 packages are looking for funding
  run `npm fund` for details
 
�  Invoking generators...
�  Installing additional dependencies...
 
 
> chromedriver@84.0.1 install C:\Projects\cli4\hello\node_modules\chromedriver
> node install.js
 
Current existing ChromeDriver binary is unavailable, proceeding with download and extraction.
Downloading from file:  https://chromedriver.storage.googleapis.com/84.0.4147.30/chromedriver_win32.zip
Saving to file: C:\Users\Cuiyo\AppData\Local\Temp\84.0.4147.30\chromedriver\chromedriver_win32.zip
Received 1040K...
Received 2080K...
Received 3120K...
Received 4160K...
Received 4737K total.
Extracting zip contents to C:\Users\Cuiyo\AppData\Local\Temp\84.0.4147.30\chromedriver.
Copying to target path C:\Projects\cli4\hello\node_modules\chromedriver\lib\chromedriver
Done. ChromeDriver binary available at C:\Projects\cli4\hello\node_modules\chromedriver\lib\chromedriver\chromedriver.exe
 
> geckodriver@1.20.0 postinstall C:\Projects\cli4\hello\node_modules\geckodriver
> node index.js
 
Downloading geckodriver... Extracting... Complete.
added 249 packages from 184 contributors in 44.28s
 
87 packages are looking for funding
  run `npm fund` for details
 
?  Running completion hooks...
 
�  Generating README.md...
 
�  Successfully created project hello.
�  Get started with the following commands:
 
 $ cd hello
 $ npm run serve
 
PS C:\Projects\cli4>

五、啟動專案

初始完之后，進入到專案根目錄：