利用 Vue cli 腳手架工具快速建立 工程化的 Vue 專案

前置要求

• 首先你的電腦上需要安裝 node 和 npm

  node 可以在 node.js 官網，按照你的系統版本，按需下載，非常方便，所以這裡就不再多囉嗦啦！

戳這裡 訪問 Node.js 官方網站

戳這裡 訪問 Node.js 中文網

npm 是全球都在用的前端資源倉庫！（這是我對它的稱呼，哈哈！）

npm 對於前端開發者來說是取之不盡用之不竭的寶庫，你會從其他大神所開發的開源元件中學到很多知識和技巧！

不僅僅 vue 的全家桶套裝都有在 npm 上，更是因為學會使用 npm 對一個前端開發者來說是必備技能，所以趕快 Get 吧！

npm install -g vue
npm install -g @vue/cli

• -g 選項是什麼意思？

  -g 指的是 global ，意思是全域性安裝，即不只在你的開發專案資料夾那一個小小的封閉環境裡安裝，是在你電腦的整個 npm 環境中安裝哦！

• 由於我們要使用最新的 vue cli 腳手架工具，而官方的提示已經不推薦

  npm install -g vue-cli
  

  這個庫的安裝方式了。所以我們選擇官方提示的 @vue/cli 吧！

• WebStorm 與 Visual Studio 選誰呢？

  眾所周知，WebStorm 是一個非常棒的 IDE 開發工具，它的優點就在於它很全面，什麼框架的東西它都會首先去適配去支援... 當然，Vue作者尤雨溪也推薦使用 Visual Studio Code...

  所以其實二者都是不錯的選擇，看你更喜歡豐富強壯的IDE 還是 輕便快捷的 文字編輯器啦！

然而在 Vue CLi 這件事情上... 它做的也太絕了吧！

它居然自己把 Vue CLi 工具 整合到了軟體介面裡！不過對使用它的人來說這是非常方便的... 但作為部落格展示就不太好看了...

所以，我們還是選擇了用 Visual Studio Code + PowerShell ( Linux 平臺下用終端 shell 也是一樣的 ) 展示如何在命令列介面下用 Vue CLi 腳手架工具初始化一個 工程化的 Vue 專案。

Vue Cli 配置各個選項怎麼填？

• Step 1：通過 Visual Studio Code 開啟一個資料夾，並開啟 PowerShell 終端

  如果你已經完成了之前前置要求的配置，那麼此時你應該可以使用 vue 命令選項了。

  在終端中輸入：

  vue create your_project_name
  

  " your_project_name " 就是你想設定的專案資料夾名，這個資料夾將會由 Vue CLi 工具來建立

start_new_fromCLI.png

• Step 2：第一項，不選取預設設定，我們一步步自己來配置；

  將箭頭移動到 Manually select features 然後回車；

select_manually_toSetUp.png

• Step 3：第二項，來選一下我們將為我們的專案引入那些 工具、元件包：

  用 空格 來選擇需要的元件包，Babel 和 Linter / Formatter 是預設選好的，那我們也就不動它們了。

  我們選擇一下三項：

  • Router： Vue 全家桶中的 路由工具，是學習 Vue 時一定要學的一環。
  • Vuex： Vue 全家桶中的 狀態管理工具，也是必學的工具之一。
  • CSS Pre-processors： css 的預處理工具；

import_tools.png

• Step 4：接下來，我們將繼續對我們選擇的這些工具元件進行一下配置選項的選擇：

  那麼先是關於 Router 的：

  

  yes_for_routerHistory.png

​ 該項詢問：是否使用歷史模式？此處我們選擇：Yes 就好啦 ~

• Step 5：然後是選擇採用哪種 CSS 預處理裝置；

choose_SASS-SCSS.png

​ 我們在這裡選擇 Sass / SCSS ；

• Step 6：之後我們選擇 ESLint 的模式：

choose_Airbnb_ESLint.png

對於 ESLint 模式，我接觸的教程都比較推薦：Airbnb 或者是 Standard 模式。

• Step 7：最後我們選擇

  • 是 在儲存時 進行語法檢查

  • 是 在 commit 提交時 進行語法檢查和修正

  

  choose_ESLintWhenSave.png

此處我們選擇 **儲存時 進行語法檢查**

• Step 8：工具的選項配置完成了，vue CLi 會詢問：是否儲存你此次的配置？

  請一定選擇 No！ 因為儲存意味著今後所有的 vue cli 都將以此來配置專案了！

no_forSaveCLICofig.png

• 之後就是等待了... ...

  如果網路情況不好，沒有架設梯子，下載太慢甚至卡掉了的話，不妨切換到 淘寶 npm 國內映象源 會快一些。

CLIloadingNpmInstall.png

• 因為我們是在用 VS Code 開啟的這個資料夾目錄下進行的建立，所以此時左側的資料夾檢視中會出現你剛才輸入的專案資料夾名，開啟之後，你將發現是以下這樣的目錄結構：

CLIFinished.png

• 目錄中有很多都是 專案開發完成後 打包時的一些打包工具的配置檔案，暫時我們不做介紹；

  但是 packge.json 是必須要了解的，它存放了本專案最基本也是最重要的一些包依賴資訊：我們開啟看一看：

open_packageJSON.png

• 此處的 version 是 npm 為你的專案初始化了一個版本號，一般都是從這樣一個 0.1.0 開始的；

• dependencies：是本專案 必須 依賴的元件、工具包。 無論開發環境還是生產環境。

• 同樣是 dependencies，但下面這一個 加了一個 dev 在前面：

  這是在開發時我們需要用到的元件、工具。比如一些打包程式，在生產環境當然是不用的

• 然後就是 最重要的 三個命令 啦！：

  • serve ：進行開發環境的執行，並且 vue 是支援 熱載入 的，你的程式碼內容一更改，頁面內容就會相應地立刻做出反應，發生改變。
  • bulid ：進行打包，然後會在 根目錄 生成一個 dist 資料夾，裡面是 index.html 和 打包好的 css、js 檔案，你的 vue 專案就可以很容易地釋出到伺服器了 ~ 據此我們之後還會有比較詳細的部署釋出教程 ...
  • lint ：進行專案程式碼內容的語法檢查 。

• 那麼現在我們就把專案 跑起來 試一下吧！

runSERVEdone.png

等待 出現 編譯成功 ( Compiled successfully ... ) 和 DONE 的字樣時，就可以按照提示的地址，在瀏覽器中看到初始化好的 Vue 示例專案了！