Vue CLI與React的create-react-app是類似的工具，目的都是為了讓開發者快速建置環境，節省複雜的安裝相關環境的時間，簡單的一個建立專案指令與設定，即建立一個內建了Hot-Reload, webpack, ESLint等功能的專案。
- 需先確認OS有安裝node.js，以下提供我的node與npm版本:
- 安裝Vue CLI:
$ npm install -g @vue/cli- 使用Vue CLI建立專案:
$ vue create ${project_name}Please pick a preset
選擇相關套件配置，這邊選擇手動選擇:
Check the features needed for your project
Choose a version of Vue.js that you want to start the project with
接著，選擇Vue.js版本，這邊我選擇3.x:
Use history mode for router?
這邊是要設定路由，y 表示選擇用HTML5的history API(history.pushState)來管理路由，URL可能會是這種:
- https://example.com/home
- https://example.com/about
若選擇n，則是會用URL+hash(#)的方式，一般會建議用history的方式，因為對SEO較友善。
Pick a linter / formatter config:
這邊選擇ESLint + Prettier
- ESLint 是檢查 Coding Style 的工具，Prettier 是程式碼格式化工具，VSCode 預設可使用 Alt + Shift + F 格式化程式碼。
Pick additional lint features
選擇檢查程式碼的時機
存檔時檢查與commit時檢查，這邊選擇存檔時檢查。
Where do you prefer placing config for Babel, ESLint, etc.?
相關設定的套件要放在哪
可以選擇將設定檔都放package.json統一管理，或者設定檔各自獨立。
Save this as a preset for future projects?
是否保存這些配置，未來其他專案可以直接套用。
我這邊是選N。
接著就會開始安裝相關套件了:
打開VSCode，直接從package.json點debug serve，在http://localhost:8080/即可看到畫面:
等同於直接下:
$ npm run serve
最後，建議裝一下VSCode套件Vetur，將vue語法highlight。
關閉ESLint檢查
在vue.config.js加入這行:
lintOnSave: false
重啟VSCode即可。
本筆記參考:
1. https://sdwh.dev/posts/2021/07/Vue-Cli-First-Projects/
2. https://book.vue.tw/CH3/3-1-vue-cli-introduction.html
3. https://ithelp.ithome.com.tw/articles/10222966
4. https://ithelp.ithome.com.tw/articles/10231505
5. https://www.gushiciku.cn/pl/gxjx/zh-tw
6. https://ithelp.ithome.com.tw/articles/10213178
