本文整理 Vue 常用 CLI 指令。
Version
Vue 3.4
Create Vue
$ npm create vue@latest
- 以 Vite 建立 Vue 專案
Development Environment
$ npm run dev
- 以 Vite 內建 Web Server 啟動開發環境，支援 hot reload
Vue 2 是
npm run serve，與 Vue 2 不一樣
Production Build
$ npm run build
- 以 Vite 為 bundler 將 HTML / JavaScript / CSS 打包到
dist目錄
Production Preview
$ npm run preview
- 以 Vite 內建 Web Server 執行
dist目錄下的 HTML / JavaScript / CSS
由於 HTML / JavaScript / CSS 經過 Vite 打包，有可能遇到 development 環境下沒問題 ，但 production 下有問題 (優化 bug)，可藉由 Production Preview 提早發現
Prettier
$ npm run format
- 將
src目錄下所有檔案用 Prettier 跑一次
ESLint
$ npm run lint
- 將
src目錄下所有檔案用 ESLint 檢查一次
Conclusion
- 這些都是 Vite 所提供的 CLI 指令，讓我們開發更方便