前提條件: 已安裝 16.0 或更高版本的 Node.js。
確保你安裝了最新版本的 Node.js,并且你的當(dāng)前工作目錄正是打算創(chuàng)建項(xiàng)目的目錄。在命令行中運(yùn)行以下命令 (不要帶上 > 符號(hào)), “//”后面的文字不要在命名行上輸入。
E:hkz_devvue3>npm create vue@latest
Need to install the following packages:
Ok to proceed? (y) y //回車
Vue.js - The Progressive JAVAScript Framework
? 請(qǐng)輸入項(xiàng)目名稱: » vue-project //入你的項(xiàng)目名

E:hkz_devvue3>npm create vue@latest
Need to install the following packages:
Ok to proceed? (y) y
Vue.js - The Progressive JavaScript Framework
√ 請(qǐng)輸入項(xiàng)目名稱: ... vue3-demo-admin
√ 是否使用 TypeScript 語(yǔ)法? ... 否 / 是
√ 是否啟用 JSX 支持? ... 否 / 是
√ 是否引入 Vue Router 進(jìn)行單頁(yè)面應(yīng)用開(kāi)發(fā)? ... 否 / 是
√ 是否引入 Pinia 用于狀態(tài)管理? ... 否 / 是
√ 是否引入 Vitest 用于單元測(cè)試? ... 否 / 是
√ 是否要引入一款端到端(End to End)測(cè)試工具? » 不需要
√ 是否引入 ESLint 用于代碼質(zhì)量檢測(cè)? ... 否 / 是
√ 是否引入 Prettier 用于代碼格式化? ... 否 / 是
正在構(gòu)建項(xiàng)目 E:hkz_devvue3vue3-demo-admin...
=============== 補(bǔ)充說(shuō)明 begin===================
為了組件下載快,設(shè)置國(guó)內(nèi)鏡像站:
// 設(shè)置鏡像(淘寶鏡像最新地址)
npm config set registry https://registry.npmmirror.com
// 還原鏡像地址為默認(rèn)地址
npm config set registry https://registry.npmjs.org/
// 獲取鏡像地址
npm config get registry
=============== 補(bǔ)充說(shuō)明 end===================
項(xiàng)目構(gòu)建完成,可執(zhí)行以下命令:
cd vue3-demo-admin
npm install
npm run format
npm run dev
目錄結(jié)構(gòu)

你現(xiàn)在應(yīng)該已經(jīng)運(yùn)行起來(lái)了你的第一個(gè) Vue 項(xiàng)目!請(qǐng)注意,生成的項(xiàng)目中的示例組件使用的是組合式 API 和 <script setup>,而非選項(xiàng)式 API。下面是一些補(bǔ)充提示:
推薦的 IDE 配置是 Visual Studio Code + Volar 擴(kuò)展。如果使用其他編輯器,參考 IDE 支持章節(jié)。
更多工具細(xì)節(jié),包括與后端框架的整合,我們會(huì)在工具鏈指南進(jìn)行討論。
要了解構(gòu)建工具 Vite 更多背后的細(xì)節(jié),請(qǐng)查看 Vite 文檔。
如果你選擇使用 TypeScript,請(qǐng)閱讀 TypeScript 使用指南。
當(dāng)你準(zhǔn)備將應(yīng)用發(fā)布到生產(chǎn)環(huán)境時(shí),請(qǐng)運(yùn)行:
> npm run build
此命令會(huì)在 ./dist 文件夾中為你的應(yīng)用創(chuàng)建一個(gè)生產(chǎn)環(huán)境的構(gòu)建版本。
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
界面效果
