使用 Vue Cli 來建置Vue專案

Vue Cli 在幹嘛?

Cli 就是一個下指令的工具。我們可以運用它去執行我們的專案。

主要分為三大方向:

1. Cli - 運用指令去建立專案，並提供 Cli UI 的介面方便操做。
2. Cli Service - 主要基於webpack。把我們的程式碼compile好變成網頁看得懂的樣子等等。
3. Cli Plugin - 使用Vue指令安裝不同的Plugin (例如 ESlint、Babel等等)

安裝Cli & 建立Vue環境

打開終端機，輸入以下指令:

@next會安裝最新版本

npm install -g @vue/cli@next
//-g 將Cli安裝於全域

vue --version
//查看版本

建立專案

這大概是最常用的指令了~
直接用Vue指令建立專案

vue create hello-world

輸入指令後，它會問你你想要建立哪個版本?

使用上下鍵選取並按enter確認，接下來它就會自動安裝一個基本的Vue專案下來啦!

執行專案

接下來它就叫你前往Vue的資料夾，並執行專案
你應該會看到這個樣子
終端機:

資料夾結構:

cd hello-world
npm run serve

輸入後，它會跑出兩個網址:

接下來把 local 的網址貼上瀏覽器，就可以看到專案啦!

npm run build

而最下方你會看到To create a production build, run npm run build.
這就是當你完成開發時，可以利用這裡的build指令。
輸入後，Vue Cli 會透過@Vue/compiler-sfc與共種loaders將SFC的.vue檔案轉譯成瀏覽器看得懂的js檔案。
打包後的檔案會出現在dist/目錄下

npm run

npm run是一個小工具，點開package.json，裡面你可以找到

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

我們輸入npm run時，就是在跑這個script。
而 npm run serve 就是執行了 "serve": "vue-cli-service serve",，
它提供一個小型的server，讓我們方便的去做簡單的測試。
vue-cli-service serve的另一個優點是，hot module replacement也就是可以即時更新。

相關文章: 運用 Cli 部署 Vue專案 到 GitHub Pages

Vue UI

使用指令開啟 Vue ui 介面
在Vue ui 上面，我們可以在這裡 新增 / 執行 / 管理 專案

vue ui

主要是 Vue ui 提供了一個網頁介面，讓我們可以調整專案(包括 Plugin/dependencies 等)

關於 Cli Service

前面提到 Cli Service 幾個重要的指令 npm run serve 等。加速我們的開發，
那 Cli service 為什麼可以做到這些呢? 我們要來了解一下 Cli Service 的核心

Cli Service 的核心

1. Webpack
2. Webpack-dev-server

webpack 與 Vue cli 的關係

關於 webpack

不了解webpack的，可以先轉讀這篇文章。
Webpack 5 筆記文章

Webpack 的基本概念很簡單，就是幫我們整理所有的檔案並轉譯成瀏覽器看得懂的程式碼。

Cli Service就是把 webpack 當作自己的核心，所以 Vue cli 就有一些webpack的功能。
Vue cli 除了將 webpack 融入自己的核心，還做了一下 config 設定。

像是我們使用的指令Vue create就是有運用到webpack核心，再配上適當的設定值，所以我們就可以用Vue create建立一個初始化的Vue專案