Vue Cli 在幹嘛?
Cli 就是一個下指令的工具。我們可以運用它去執行我們的專案。
主要分為三大方向:
- Cli - 運用指令去建立專案，並提供 Cli UI 的介面方便操做。
- Cli Service - 主要基於webpack。把我們的程式碼compile好變成網頁看得懂的樣子等等。
- 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 的核心
- Webpack
- 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專案
