今天要來聊聊 Vue-cli 這個腳手架，正是因為他的存在可以讓我們小碼農專心的在代碼上面，關於 webpack 以及一些 SPA 封裝全部都在這裡面了，讓我們來看看 Vue-cli 怎麼用吧
先不提到 Vite，Vue2 還是先用 Vue-cli 為主

NodeJS 版本安裝

目前絕大多數這類的腳手架還是以 NodeJS 為基底，因此讓我們先來安裝 NodeJS 的管理工具 nvm 吧，不同專案使用的 nodeJS 版本不同，相對應的套件也會有版本問題，在接手專案後最好還是切換到使用的 NodeJS 版本吧
nvm 安裝方式：
NVM for windows
NVM for mac/linux

當安裝好後直接在 terminal 輸入 nvm ，若有內容跑出來就代表安裝成功囉
接下來我們就可以透過

nvm install 16.14
nvm install 20

之類的安裝指令來安裝相對應的 NodeJS 版本
並且可以透過

node -v

來查看版本，並且使用

nvm use v16.14
nvm use v20

這類的方式來進行版本切換，那在安裝 Vue-cli 之前建議安裝一個在 8.9 版以上的 NodeJS，需要注意的是在 NodeJS 17 版針對 openSSL 有重大更新，向下許多內容不相容

Vue-cli 安裝

在主機安裝好 NodeJS 後，我們可以使用

npm install -g @vue/cli

來將 vue-cli 全域安裝到主機上，之後透過

vue create <project-name>

來在你的目錄內安裝一套 Vue 的架構，其中我們可以先注意到 package.json 這個檔案，之後若有套件或是 script 要更動都是從這邊來查看的
接下來就是針對此專案通常來說的第一步

1. 安裝套件

npm install

vue-cli 會將架構以及一些相依的內容先放在 package.json 當中，並且在我們安裝後即可使用
2. 專案檢視
透過 Vue-cli 構建的專案通常會有這幾個資料夾

• node_modules: 安裝好的套件都放在這邊，若要引用可以直接呼叫他的名稱就好
• public: 放在這裡的東西不會被額外處理，通常放 index.html 以及 favicon.ico
• src: 需要編譯的檔案放在這邊，此目錄預設可以使用 @ 直接代替
  @/view 同等於 {Root}/src/view

3. 執行專案
   我們可以在 package.json 內看到一行 scripts 為

 "serve": "vue-cli-service serve",

這行就是用來構建我們的專案，並且提供即時熱更新來讓我們專案內的內容若有更新可以及時出現在 web server 上，在我們確認完專案需要將它變成 mixin 的檔案後可以透過

"build": "vue-cli-service build",

來將檔案打包並且複製上伺服器，那打包好的位置預設是在 /dist 中，具體的指令為

npm run serve
npm run build

今天大致上說明一下 Vue-cli 的用途，明天將介紹 .vue 檔案以及 env 的使用方式，讓我們明天見～