03-Vue.js環境準備-使用vue-cli快速搭建項目(cli3+)

1、文章大綱vue

2、安裝環境node

本文基於以下的環境進行試驗的：webpack

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

3、安裝vue-cli
git

使用npm全局安裝vue-cli：web

npm install -g @vue/cli

可使用以下的建立項目的命令，查看vue cli的安裝狀況：vue-router

按照上面的提示，先卸載以前的版本，而後安裝新的版本。vuex

安裝成功後，若是要查看安裝的cli的版本，能夠執行命令：chrome

node -V

舒適提醒：-V是大寫的V，而不是小寫的v。vue-cli

4、建立項目npm

在命令行執行以下命令：

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個選項的操做。

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

如上圖所示，我們選擇第1個選項，而後按下回車鍵，咱們不須要再作其餘任何操做，而後就能夠將項目建立完成。命令執行的狀況以下圖所示：

這樣，使用第1個選項建立項目就算完成了，咱們再試試第2個選項。

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

如上圖所示，此次選擇的是第2個選項，而後按下回車鍵，咱們仍然不須要再作其餘任何操做，而後就能夠將項目建立完成。命令執行的狀況以下圖所示：

這樣，使用第2個選項建立項目就算完成了。
能夠看到，使用前2個選項建立項目是比較簡單的，不須要咱們去作過多的配置，基本上就按照默認的配置來建立項目了。若是咱們但願本身定義項目的各項配置信息，那麼就須要使用第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>

5、啓動項目

初始完以後，進入到項目根目錄：

cd hello

以下圖所示：

在命令行輸入以下命令，啓動項目：

npm run serve

稍等片刻，能夠看到命令行輸出了以下的內容：

在命令行上看到相似於上面你的消息，就說明咱們的項目啓動成功了。而後複製2個地址中的任何一個，粘貼到瀏覽器的地址欄中打開，以下圖所示：

至此，項目就算啓動成功了。

6、打包上線

在開發完項目以後，就應該打包上線了。vue-cli也提供了打包的命令，打開命令行工具cmd，在項目根目錄下執行以下命令：

npm run build

執行完以後，能夠看到在項目根目錄下多出了一個dist目錄，以下圖所示：

該目錄下就是打包好的全部靜態資源，直接部署到靜態資源服務器就行了。

7、參考資料