由於目前為止 (2023.7) Vue 推薦開發配套會是 Vue3 script setup 語法 、 vite 與 pinia 作為主流，未來的文章將會以這幾種配套做為主。
另外，因為筆者習慣使用 npm 來設定套件，內容也多會以 npm 為主，如果習慣其他套件管理工具，例如 yarn 、 pnpm ，也是可以替換使用的！
# npm init vue@latest
$ npm init vue@latest | |
Vue.js - The Progressive JavaScript Framework | |
√ Project name: ... initVue3 | |
√ Add TypeScript? ... No / Yes | |
√ Add JSX Support? ... No / Yes | |
√ Add Vue Router for Single Page Application development? ... No / Yes | |
√ Add Pinia for state management? ... No / Yes | |
√ Add Vitest for Unit Testing? ... No / Yes | |
√ Add an End-to-End Testing Solution? » No | |
√ Add ESLint for code quality? ... No / Yes | |
Scaffolding project in D:\GitHub\initVue3... | |
Done. Now run: | |
cd initVue3 | |
npm install | |
npm run dev |
生成結果：
# npm init vite@latest
$ npm create vite@latest | |
√ Project name: ... createVite | |
√ Select a framework: » Vue | |
√ Select a variant: » JavaScript | |
Scaffolding project in D:\GitHub\createVite... | |
Done. Now run: | |
cd createVite | |
npm install | |
npm run dev |
生成結果：
# npm create vite@latest
$ npm init vite@latest | |
√ Project name: ... initVite | |
√ Select a framework: » Vue | |
√ Select a variant: » JavaScript | |
Scaffolding project in D:\GitHub\initVite... | |
Done. Now run: | |
cd initVite | |
npm install | |
npm run dev |
生成結果：
# 結論
事實上三個指令大同小異，其中 npm init vite 與 npm create vite 操作上完全一樣 (畢竟都是 vite 官方文件的指令)
比較不同的是，使用 npm init vue@latest 指令，操作步驟會額外詢問是否要建置 router 、 pinia，甚至一些測試框架
以結果來說，如果希望起手式就先幫忙配套好較為完整的內容，建議使用 init vue@latest 來建置
但如果希望起手式可以越簡單越好，其他功能之後再增加的話，直接使用 npm init vite 或是 npm create vite 即可
