前提條件: 已安裝 16.0 或更高版本的 Node.js。
確保你安裝了最新版本的 Node.js,并且你的當前工作目錄正是打算創建項目的目錄。在命令行中運行以下命令 (不要帶上 > 符號), “//”后面的文字不要在命名行上輸入。
E:hkz_devvue3>npm create vue@latest
Need to install the following packages:
create-vue@3.8.0
Ok to proceed? (y) y //回車
Vue.js - The Progressive JAVAScript Framework
? 請輸入項目名稱: » vue-project //入你的項目名
E:hkz_devvue3>npm create vue@latest
Need to install the following packages:
create-vue@3.8.0
Ok to proceed? (y) y
Vue.js - The Progressive JavaScript Framework
√ 請輸入項目名稱: ... vue3-demo-admin
√ 是否使用 TypeScript 語法? ... 否 / 是
√ 是否啟用 JSX 支持? ... 否 / 是
√ 是否引入 Vue Router 進行單頁面應用開發? ... 否 / 是
√ 是否引入 Pinia 用于狀態管理? ... 否 / 是
√ 是否引入 Vitest 用于單元測試? ... 否 / 是
√ 是否要引入一款端到端(End to End)測試工具? » 不需要
√ 是否引入 ESLint 用于代碼質量檢測? ... 否 / 是
√ 是否引入 Prettier 用于代碼格式化? ... 否 / 是
正在構建項目 E:hkz_devvue3vue3-demo-admin...
=============== 補充說明 begin===================
為了組件下載快,設置國內鏡像站:
// 設置鏡像(淘寶鏡像最新地址)
npm config set registry https://registry.npmmirror.com
// 還原鏡像地址為默認地址
npm config set registry https://registry.npmjs.org/
// 獲取鏡像地址
npm config get registry
=============== 補充說明 end===================
項目構建完成,可執行以下命令:
cd vue3-demo-admin
npm install
npm run format
npm run dev
目錄結構
你現在應該已經運行起來了你的第一個 Vue 項目!請注意,生成的項目中的示例組件使用的是組合式 API 和 <script setup>,而非選項式 API。下面是一些補充提示:
推薦的 IDE 配置是 Visual Studio Code + Volar 擴展。如果使用其他編輯器,參考 IDE 支持章節。
更多工具細節,包括與后端框架的整合,我們會在工具鏈指南進行討論。
要了解構建工具 Vite 更多背后的細節,請查看 Vite 文檔。
如果你選擇使用 TypeScript,請閱讀 TypeScript 使用指南。
當你準備將應用發布到生產環境時,請運行:
> npm run build
此命令會在 ./dist 文件夾中為你的應用創建一個生產環境的構建版本。
npm run dev
VITE v4.5.0 ready in 429 ms
? Local: http://localhost:5173/
?.NETwork: use --host to expose
? press h to show help
Shortcuts
press r to restart the server
press u to show server url
press o to open in browser
press c to clear console
press q to quit
界面效果