下載node.js

官網下載，版本號為14.17.3

檢視node和npm版本

node -v
npm -v

安裝vue-cli

npm install -g @vue/cli
vue -V

檢視vue-cli版本

建立專案

命令建立

vue create XXX

選擇手動建立

選擇要裝的元件，Babel為js編譯器、Router是vue的路由，Vuex管理Vue元件的狀態，CSS Pre-processors為css預處理（即sass/scss）。

選擇版本3.X

選擇router外掛用h5的history模式

選擇css預處理方式，Sass/SCSS，這裡不要再選擇node-sass，一定要使用dart-sass。node-sass底層依賴 libsass，導致很多使用者安裝的特別的困難，尤其是 windows 使用者，它強制使用者在windows環境中必須安裝python2和Visual Studio才能編譯成功。

選擇配置檔案用package.json

是否把此次設定變成預選方案,方便下次新建專案時使用

建立完成

UI介面建立

vue ui

新建專案

輸入專案名

還是一樣,選擇手動

選擇外掛,並讓外掛使用獨立的配置檔案

各外掛的配置選擇

不儲存預設

部署

npm run dev 是用來在本地開發的時候做除錯用的，vue開發的是前端的東西，不是nodejs服務端程式，生產環境裡不該存在npm，甚至nodejs也不需要（用nodejs來做web靜態服務的除外），正確的做法很簡單，通過npm run build把生成的dist資料夾（不要上傳資料夾）裡的內容上傳到http伺服器上就可以通過http來訪問了，開發機上正常，上傳以後程式出現錯誤不能執行的原因99.99%的可能性是你引用資源的路徑有問題。

部署到tomcat

在專案根目錄下新建vue.config.js檔案，新增如下內容

module.exports = {
  publicPath: "./"
}

然後

npm run build