什麼是 Vue-cli

cli 這個詞的是代表 command line(終端)

也就是 Vue 所提供的一套 command line 工具

提供你在終端的環境使用

(在你的終端輸入 Vue 就可以使用)

後續將會講解功能、安裝方式

Vue-cli 的安裝方式

基本上在 google 搜尋 vue cli install 就可以找到相關的安裝教學

我們這邊就直接參考 vue-cli 在 npm 上提供的教學 (連結)

先裝好 npm 和 node

接下來在終端輸入 npm install -g vue-cli

就完成了

在終端輸入 vue 就可以測試是否有安裝成功(還會跳出相關用法)

什麼是 Vue-cli

基本上 Vue-cli 這個工具唯一的用途就是幫你創建 boilerplate

如果不知道 boilerplate 的意思，他就是一種樣板

意思是我們在使用不同程式語言時，常常會有一些基本設定，或是常常需要你重複寫的 code

舉例來說，像是每次都要寫的 html

如果每次重新開啟一個專案時，都要手動輸入這些內容

肯定會很枯燥乏味

所以就出現了不少工具，可以根據你的需求產生不同的樣板，也就是 boilerplate

舉例來說，像是許多編輯器都會支援的一個工具 - emmet

就提供了像是，輸入 html:5 後按

就能自動產出 html boilerplate 的功能

[維基百科: boilerplate code]
[What is boilerplate in programming] - Stackoverflow
[Emmet 官網]

常見的 boilerplate 套件

就舉跟 JavaScript 比較相關的 express, vue, react, angular

Express Generator - 自動產生 express 這個後端框架的 boilerplate

Create-React-App - 自動產生 React 開發的 boilerplate

Angular-Cli - 自動產生 Angular 開發的 boilerplate

Vue-Cli - 自動產生 Vue 開發的 boilerplate

Vue-cli 包含了什麼

開始使用 vue-cli，可以先輸入 vue list 來查看 vue-cli 支援哪幾種 template

★ browserify - 使用 browserify 作為打包工具，附加 hot-reload, lint, 單元測試
★ browserify-simple - 輕量版 browserify 樣板
★ pwa - 使用 webpack 作為打包工具，附加 Progressive Web App 的相關支援
★ simple - 最輕量的 Vue 樣板，幾乎沒有附加任何工具
★ webpack - 使用 webpack 作為打包工具，附加 hot-reload, lint, 單元測試, css 編譯
★ webpack-simple - 輕量版的 webpack 樣板

這邊我們將使用 webpack 樣板，讓我們能夠盡可能了解 Vue-Cli 的各種功能
(除了 PWA 以外，webpack 樣板提供了最多設定)

這邊我們就實際來初始化(init)一次吧！

vue-cli 初始化

這邊就一步一步的介紹

1. 使用 vue init webpack <資料夾名稱> 來創建一個 boilerplate
2. 輸入 project name，你的專案想使用的名稱(會寫入 package.json 裡)
3. 輸入 project description，簡介(會寫入 package.json 裡)
4. 輸入 author，作者，可以隨意填(或按 enter，會寫入 package.json 裡)
5. Vue build - 你想使用的編譯器，這裡選 Runtime + Compiler
6. 安裝 Vue-Router - 一個很不錯的插件，選 Y (Yes)
7. 使用 ESLint 來規範你的 coding style，後續會介紹，選 Y (Yes)
8. 這邊會叫你選擇 ESLint 的設定檔，我們使用 Standard
9. 是否要加入 Unit test (單元測試)，對這個 project 不需要，選 n (no)
10. 是否要加入 e2e 測試 (自動模擬使用者操作的測試)，選 n (no)

接下來他就會創一個資料夾了，裡面會有滿滿的 boilerplate code

cd 進入我們的資料夾後

可以先使用 npm install 把該裝的套件都裝好

使用你偏好的編輯器打開，可以看見許多奇妙的檔案

這我們會在後續花篇幅一一介紹，我們明天見！