摘要本文從零開始講解 Vue 3 前端工程化實踐涵蓋環(huán)境準(zhǔn)備、項目創(chuàng)建、目錄結(jié)構(gòu)解析、項目啟動、開發(fā)流程以及組合式 API 與選項式 API 的對比最后通過一個完整的用戶列表數(shù)據(jù)渲染案例幫助讀者快速掌握 Vue 3 工程化開發(fā)的核心技能。目錄1.1 什么是前端工程化1.2 環(huán)境準(zhǔn)備1.3 Vue 項目創(chuàng)建實戰(zhàn)1.4 Vue 項目開發(fā)流程1.5 Vue API 風(fēng)格對比實戰(zhàn)案例用戶列表數(shù)據(jù)渲染1.1 什么是前端工程化在深入了解 Vue 工程化之前我們先來回顧一下 Vue 是什么Vue 是一款用于構(gòu)建用戶界面的漸進式 JavaScript 框架官方Vue.js - 漸進式 JavaScript 框架 | Vue.js。在傳統(tǒng)的開發(fā)模式中我們常常會遇到以下問題不規(guī)范每次開發(fā)都是從零開始缺乏統(tǒng)一標(biāo)準(zhǔn)。難復(fù)用組件和代碼難以在不同項目中共享。難維護資源文件散亂缺乏規(guī)范化管理。因此現(xiàn)代企業(yè)開發(fā)更傾向于采用前端工程化的方式主要具備以下 4 個特點模塊化將 JS、CSS 等資源封裝成可復(fù)用的模塊。組件化將 UI 組件、樣式和行為封裝成獨立組件。規(guī)范化統(tǒng)一的目錄結(jié)構(gòu)和編碼規(guī)范。自動化構(gòu)建、測試、部署流程自動化。簡單來說前端工程化就是將前端開發(fā)所需的工具、技術(shù)、流程和經(jīng)驗進行規(guī)范化和標(biāo)準(zhǔn)化。1.2 環(huán)境準(zhǔn)備1.2.1 工具介紹create-vueVue 官方提供的腳手架工具用于快速生成工程化的 Vue 項目。主要功能統(tǒng)一的目錄結(jié)構(gòu)本地調(diào)試服務(wù)熱重載Hot Module Replacement單元測試集成生產(chǎn)環(huán)境打包前置依賴使用 create-vue 前需要安裝 Node.js 環(huán)境。1.3 Vue 項目創(chuàng)建實戰(zhàn)1.3.1 項目創(chuàng)建步驟創(chuàng)建一個工程化的 Vue 項目只需執(zhí)行一條命令npm create vue3.3.4配置選項詳解Project name項目名稱默認(rèn) vue-project。Add TypeScript?是否集成 TypeScript。Add JSX Support?是否支持 JSX 語法。Add Vue Router...是否添加路由管理。Add Pinia ...是否添加狀態(tài)管理。Add Vitest ...是否添加單元測試。Add an End-to-End ...是否添加端到端測試。Add ESLint for code quality?是否添加代碼質(zhì)量檢查。溫馨提示執(zhí)行上述命令會安裝并運行 create-vue這是 Vue 官方的項目腳手架工具。項目創(chuàng)建完成后進入項目目錄并安裝依賴cd vue-project01 npm install注意創(chuàng)建項目和安裝依賴需要網(wǎng)絡(luò)連接。如果網(wǎng)絡(luò)不穩(wěn)定導(dǎo)致依賴下載失敗可以重新執(zhí)行npm install命令。1.3.2 項目結(jié)構(gòu)解析使用 VS Code 打開創(chuàng)建好的 Vue 項目項目目錄結(jié)構(gòu)說明核心目錄src目錄是我們編寫前端代碼的主要位置。1.3.3 啟動項目方式一命令行啟動在項目根目錄執(zhí)行npm run dev方式二VS Code 圖形界面點擊 NPM 腳本面板中的dev運行按鈕啟動成功后訪問http://localhost:51731.4 Vue 項目開發(fā)流程*.vue文件是 Vue 的單文件組件SFCSingle-File Components它將組件的邏輯、模板和樣式封裝在同一個文件中。1.5 Vue API 風(fēng)格對比Vue 提供了兩種不同的組件編寫風(fēng)格組合式 APIComposition APIVue 3 推薦。選項式 APIOptions APIVue 2 傳統(tǒng)方式。組合式 API 示例script setup import { ref, onMounted } from vue; const count ref(0); // 聲明響應(yīng)式變量 function increment() { // 聲明函數(shù) count.value; } onMounted(() { // 生命周期鉤子 console.log(組件已掛載); }); /script template button clickincrement點擊計數(shù): {{ count }}/button /template style scoped button { padding: 10px 20px; font-size: 16px; } /style核心概念setup組合式 API 的語法糖標(biāo)識。ref()創(chuàng)建響應(yīng)式數(shù)據(jù)。onMounted()組件掛載后的生命周期鉤子。選項式 API 示例script export default { data() { return { count: 0 } }, methods: { increment() { this.count; } }, mounted() { console.log(組件已掛載); } } /script template button clickincrement點擊計數(shù): {{ count }}/button /template style scoped button { padding: 10px 20px; font-size: 16px; } /style重要區(qū)別組合式 API 中沒有this對象而選項式 API 通過this訪問組件實例。實戰(zhàn)案例用戶列表數(shù)據(jù)渲染需求使用組合式 API 實現(xiàn)用戶列表數(shù)據(jù)渲染頁面加載后發(fā)送異步請求獲取數(shù)據(jù)。實現(xiàn)步驟在src/views目錄創(chuàng)建UserList.vue。將原有 HTML/CSS/JS 代碼遷移到 Vue 單文件組件中。安裝 axios 用于發(fā)送 HTTP 請求。UserList.vue 完整代碼script setup import { ref, onMounted } from vue; import axios from axios; // 響應(yīng)式數(shù)據(jù) const userList ref([]); const name ref(); const gender ref(); const job ref(); // 查詢函數(shù) const search async () { try { const response await axios.get( https://web-server.itheima.net/emps/list?name${name.value}gender${gender.value}job${job.value} ); userList.value response.data.data; } catch (error) { console.error(數(shù)據(jù)獲取失敗:, error); } }; // 組件掛載時自動查詢 onMounted(() { search(); }); /script template div classsearch-container input typetext v-modelname placeholder請輸入姓名 / select v-modelgender option value全部性別/option option value1男/option option value2女/option /select select v-modeljob option value全部職位/option option value1班主任/option option value2講師/option option value3其他/option /select button classsearch-btn clicksearch查詢/button /div table classuser-table thead tr th序號/th th姓名/th th頭像/th th性別/th th職位/th th入職時間/th th更新時間/th /tr /thead tbody tr v-for(user, index) in userList :keyuser.id td{{ index 1 }}/td td{{ user.name }}/td tdimg :srcuser.image alt頭像 classavatar //td td span v-ifuser.gender 1男/span span v-else-ifuser.gender 2女/span span v-else其他/span /td td span v-showuser.job 1班主任/span span v-showuser.job 2講師/span span v-showuser.job ! 1 user.job ! 2其他/span /td td{{ user.entrydate }}/td td{{ user.updatetime }}/td /tr /tbody /table /template style scoped .search-container { width: 80%; margin: 20px auto; padding: 20px; background: #f5f5f5; border-radius: 8px; display: flex; gap: 15px; align-items: center; } .search-container input, .search-container select { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } .search-btn { padding: 10px 30px; background: #42b983; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; } .search-btn:hover { background: #3aa876; } .user-table { width: 80%; margin: 20px auto; border-collapse: collapse; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .user-table th, .user-table td { border: 1px solid #ddd; padding: 12px; text-align: center; } .user-table th { background: #42b983; color: white; font-weight: bold; } .user-table tr:nth-child(even) { background: #f9f9f9; } .user-table tr:hover { background: #f1f1f1; } /style至此一個完整的用戶列表數(shù)據(jù)渲染案例就完成了。通過組合式 API 配合 axios我們實現(xiàn)了頁面加載后自動請求數(shù)據(jù)并渲染表格的效果。