🤟致敬讀者

• 🟩感謝閱讀🟦笑口常開🟪生日快樂?早點睡覺

📘博主相關

• 🟧博主信息🟨博客首頁🟫專欄推薦🟥活動信息

---

---

📃文章前言

• 🔷文章均為學習工作中整理的筆記。
• 🔶如有錯誤請指正，共同學習進步。

---

《從零搭建Vue3項目實戰》（AI輔助搭建Vue3+ElemntPlus后臺管理項目）零基礎入門系列第二篇:項目創建和初始化

從零搭建Vue3項目實戰，借助AI工具輔助學習和代碼生成，零基礎小白亦可輕松上手實現。

以下為系列篇所有文章：
《從零搭建Vue3項目實戰》零基礎入門系列第一篇:開發環境準備
《從零搭建Vue3項目實戰》零基礎入門系列第二篇:項目創建和初始化
《從零搭建Vue3項目實戰》零基礎入門系列第三篇:ElementPlus引入和應用
《從零搭建Vue3項目實戰》零基礎入門系列第四篇:登錄頁面實現
《從零搭建Vue3項目實戰》零基礎入門系列第五篇:登錄頁面優化及使用AI學習代碼
《從零搭建Vue3項目實戰》零基礎入門系列第六篇:頁面跳轉功能實現（Router的引入和使用）
《從零搭建Vue3項目實戰》零基礎入門系列第七篇:菜單欄實現
《從零搭建Vue3項目實戰》零基礎入門系列第八篇:菜單欄優化和階段項目源碼
《從零搭建Vue3項目實戰》零基礎入門系列第九篇:用戶管理功能實現
《從零搭建Vue3項目實戰》零基礎入門系列第十篇:商品管理功能實現
《從零搭建Vue3項目實戰》零基礎入門系列第十一篇:訂單管理功能實現
《從零搭建Vue3項目實戰》零基礎入門系列第十二篇（完結篇）:數據統計功能實現
《從零搭建Vue3項目實戰》零基礎入門一篇通關（AI輔助搭建Vue3+ElemntPlus后臺管理項目）

系列文章均收錄在前端vue3入門實戰專欄中，可訂閱專欄了解更多內容

1. 項目創建

1.1 創建命令

在任意文件夾下（這里創建一個vue3文件夾），路徑中輸入cmd回車，打開cmd窗口

輸入命令

npm create vue

1.2 配置鏡像源

如果由于網絡問題，通過默認的node地址拉取失敗
可參考如下，將拉去地址修改為淘寶鏡像地址，最新的淘寶鏡像源已更新為

npm config set registry https://registry.npmmirror.com

回車后再用下面命令查看更新后的鏡像地址

npm config get registry

然后再次執行創建命令

npm create vue

1.3 創建過程

創建過程如下
輸入y繼續創建

輸入項目名稱，這里自定義為vue3-demo001
然后回車
選擇需要的模塊，這里直接選擇Router和Pinia，上下箭頭切換，空格鍵選擇，回車確認

回車后，創建成功
項目生成后，輸出內容中有三條命令如下圖紅框

---

2. 項目啟動

依次執行紅框中的三條命令，運行項目

cd vue3-demo001

npm install

npm run dev

執行結束后如下，會有本地的服務訪問地址，如紅框

瀏覽器輸入訪問地址即可訪問服務，如下訪問成功

---

3. 初始化項目

創建后的項目，頁面是默認的，很多東西不需要，不刪除的話對后續的頁面效果會有影響
在刪之前我們先用VSCode打開項目文件夾（后續就在VSCode中開發項目）
注：將之前打開的cmd窗口（服務運行的窗口）關閉

3.1 項目文件（夾）說明

選擇項目文件夾，鼠標右鍵使用VSCode打開

項目文件夾中的各文件夾和文件的描述：參考文章–vue項目結構詳解

3.2 運行服務

菜單欄中Terminal–New Terminal打開終端窗口

執行命令運行項目

npm install

npm run dev

輸出內容中有Local：本地訪問地址
按Ctrl+鼠標左鍵點擊地址即可跳轉到服務頁面

3.3 刪除、修改代碼

刪除代碼如下
需要刪除的文件
src/components/HelloWorld.vue
src/components/TheWelcome.vue
src/components/WelcomeItem.vue
src/views/AboutView.vue

刪除以下紅框中的文件

需要修改的文件
src/App.vue
src/main.js
src/views/HomeView.vue
如如中紅框（AboutView.vue除外）

App.vue
對App.vue文件進行修改如下
將內容刪除，只留框架，并引入router-view標簽，動態加載
代碼如下

<script setup></script><template><router-view />
</template><style scoped></style>

main.js
對main.js文件的修改如下
將樣式注釋，否則內容會被默認樣式設置為居中
代碼如下

// import './assets/main.css'import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'const app = createApp(App)app.use(createPinia())
app.use(router)app.mount('#app')

HomeView.vue
對HomeView.vue文件的修改如下
將內容刪除只留框架
代碼如下

<script setup></script><template><div>HomeView</div>
</template><style scoped></style>

運行項目，訪問頁面，頁面如下

經過以上操作，項目的初始化狀態完成，接下來就可以開始項目的開發

4. 源碼

初始化源碼
CSDN下載：前端 vue3 vue3入門實戰 從零搭建vue3+element-plus后臺管理項目 階段0項目源碼 項目初始化源碼

---

📜文末寄語

• 🟠關注我，獲取更多內容。
• 🟡技術動態、實戰教程、問題解決方案等內容持續更新中。
• 🟢《全棧知識庫》技社區，集結全棧各領域開發者，期待你的加入。
• 🔵?加入開發者的《專屬社群》，分享交流，技術之路不再孤獨，一起變強。
• 🟣點擊下方名片獲取更多內容🍭🍭🍭👇

---