Vue3企业级项目实战：滴滴陪诊后台管理系统架构与工程化实践

Vue3实战企业级项目后台管理系统

于 2026-07-31 04:22:22 修改

·本内容遵循CC 4.0 BY-SA版权协议

如果你正在学习 Vue3，可能会遇到这样的困境：看了很多基础教程，但一到实际项目就无从下手；或者跟着视频敲完了代码，却不知道为什么这样设计。更让人头疼的是，很多教程只教功能实现，却不讲工程化规范和真实业务场景中的坑。

这个滴滴陪诊后台项目实战系列，用49讲的完整篇幅，把 Vue3 + vue-router + element-plus 这套技术栈真正用到了实战中。但真正有价值的不是代码本身，而是它展示的企业级项目架构思维——从路由权限设计到支付集成，从组件封装到状态管理，每个环节都体现了实际开发中的最佳实践。

本文将带你深入剖析这个项目的核心价值，不仅还原关键代码实现，更重要的是解读背后的设计思路。你会发现，学完这个项目后，你获得的不仅是49个视频的代码复制能力，而是真正理解如何用Vue3构建可维护、可扩展的后台管理系统。

1. 为什么这个Vue3实战项目值得深入学习？

很多Vue3初学者容易陷入"API收集癖"——过度关注新语法特性，却忽略了工程化能力的培养。这个滴滴陪诊后台项目最大的价值在于，它完整呈现了一个真实商业项目的技术决策过程。

1.1 项目技术栈的合理选择

Vue3：使用Composition API进行逻辑复用，相比Options API更利于大型项目维护
vue-router：实现路由权限控制和页面导航
element-plus：提供丰富的UI组件，加速开发效率
支付功能：集成真实业务场景，涉及安全性和用户体验考量

1.2 解决的实际开发痛点

这个项目特别适合以下场景的开发者：

从Vue2迁移到Vue3，需要理解新范式在实际项目中的应用
学习了Vue3基础语法，但不知道如何组织大型项目结构
需要开发后台管理系统，但缺乏权限设计和组件封装经验
想要了解支付功能在前端的安全实现方案

2. 环境准备与项目初始化

在开始编码前，正确的环境配置是项目成功的基础。以下是基于最新Vue3生态的配置方案。

2.1 开发环境要求

BASH

# 检查Node.js版本（推荐18.x以上）

node --version

# 检查npm版本

npm --version

# 或使用yarn

yarn --version

2.2 创建Vue3项目

BASH

# 使用Vite创建项目（推荐）

npm create vue@latest didi-care-admin

# 或使用Vue CLI

vue create didi-care-admin

项目创建时的关键选择：

Vue 3
TypeScript（推荐）
JSX（根据团队习惯选择）
Vue Router
Pinia（状态管理）
ESLint + Prettier（代码规范）

2.3 安装Element Plus

BASH

# 安装Element Plus

npm install element-plus

# 安装图标库

npm install @element-plus/icons-vue

在main.ts中全局引入：

TYPESCRIPT

// main.ts

import { createApp } from 'vue'

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

import App from './App.vue'

import router from './router'

const app = createApp(App)

// 注册所有图标

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

app.component(key, component)

}

app.use(ElementPlus)

app.use(router)

app.mount('#app')

3. 项目架构设计与核心概念

3.1 目录结构规范

TEXT

src/

├── api/ # API接口管理

├── assets/ # 静态资源

├── components/ # 公共组件

├── layouts/ # 布局组件

├── router/ # 路由配置

├── store/ # 状态管理

├── types/ # TypeScript类型定义

├── utils/ # 工具函数

├── views/ # 页面组件

└── main.ts # 入口文件

3.2 路由设计思路

路由设计是后台管理系统的核心，需要考虑权限控制和页面结构。

TYPESCRIPT

// router/index.ts

import { createRouter, createWebHistory } from 'vue-router'

import type { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [

{

path: '/login',

component: () => import('@/views/Login.vue'),

meta: { requiresAuth: false }

{

path: '/',

component: () => import('@/layouts/MainLayout.vue'),

meta: { requiresAuth: true },

children: [

{

path: 'dashboard',

component: () => import('@/views/Dashboard.vue')

{

path: 'order',

component: () => import('@/views/order/OrderList.vue')

// 更多路由...

]

}

]

const router = createRouter({

history: createWebHistory(),

routes

})

// 路由守卫 - 权限控制

router.beforeEach((to, from, next) => {

const token = localStorage.getItem('token')

if (to.meta.requiresAuth && !token) {

next('/login')

} else {

next()

}

})

export default router

4. 核心功能模块实现

4.1 登录认证模块

登录功能不仅是简单的表单提交，还涉及token管理、权限验证等安全考量。

VUE

<el-form :model="form" :rules="rules" ref="loginForm">

<el-form-item prop="username">

<el-input v-model="form.username" placeholder="用户名" />

</el-form-item>

<el-form-item prop="password">

<el-input v-model="form.password" type="password" placeholder="密码" />

</el-form-item>

<el-button type="primary" @click="handleLogin" :loading="loading">

</el-button>

</el-form>

</div>

</template>

import { reactive, ref } from 'vue'

import { useRouter } from 'vue-router'

import { ElMessage } from 'element-plus'

import { login } from '@/api/user'

const router = useRouter()

const loading = ref(false)

const form = reactive({

username: '',

password: ''

})

const rules = {

username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],

password: [{ required: true, message: '请输入密码', trigger: 'blur' }]

}

const handleLogin = async () => {

loading.value = true

try {

const { data } = await login(form)

localStorage.setItem('token', data.token)

localStorage.setItem('userInfo', JSON.stringify(data.userInfo))

ElMessage.success('登录成功')

router.push('/dashboard')

} catch (error) {

ElMessage.error('登录失败')

} finally {

loading.value = false

}

</script>

4.2 订单管理模块

陪诊订单管理是核心业务模块，涉及列表展示、状态流转、筛选查询等功能。

VUE

<el-card>

<el-button type="primary" @click="handleCreate">新建订单</el-button>

</div>

</template>

<el-form :model="queryParams" inline>

<el-form-item label="订单状态">

<el-select v-model="queryParams.status" clearable>

<el-option label="待接单" value="pending" />

<el-option label="进行中" value="processing" />

<el-option label="已完成" value="completed" />

<el-option label="已取消" value="cancelled" />

</el-select>

</el-form-item>

<el-form-item>

<el-button type="primary" @click="handleSearch">搜索</el-button>

<el-button @click="handleReset">重置</el-button>

</el-form-item>

</el-form>

<el-table :data="orderList" v-loading="loading">

<el-table-column prop="orderNo" label="订单号" width="200" />

<el-table-column prop="patientName" label="患者姓名" />

<el-table-column prop="serviceTime" label="服务时间" width="180" />

<el-table-column prop="status" label="状态" width="100">

<el-tag :type="getStatusType(row.status)">

</el-tag>

</template>

</el-table-column>

<el-table-column label="操作" width="200">

<el-button size="small" @click="handleView(row)">查看</el-button>

<el-button

size="small"

type="primary"

@click="handleEdit(row)"

:disabled="row.status !== 'pending'"

编辑

</el-button>

</template>

</el-table-column>

</el-table>

<el-pagination

v-model:current-page="queryParams.page"

v-model:page-size="queryParams.size"

:total="total"

@current-change="handlePageChange"

layout="total, sizes, prev, pager, next, jumper"

</el-card>

</div>

</template>

import { reactive, ref, onMounted } from 'vue'

import { getOrderList } from '@/api/order'

interface OrderItem {

id: number

orderNo: string

patientName: string

serviceTime: string

status: string

}

const loading = ref(false)

const orderList = ref<OrderItem[]>([])

const total = ref(0)

const queryParams = reactive({

status: '',

page: 1,

size: 10

})

const getStatusType = (status: string) => {

const typeMap: Record<string, string> = {

pending: 'warning',

processing: 'primary',

completed: 'success',

cancelled: 'info'

}

return typeMap[status] || 'info'

}

const getStatusText = (status: string) => {

const textMap: Record<string, string> = {

pending: '待接单',

processing: '进行中',

completed: '已完成',

cancelled: '已取消'

}

return textMap[status] || '未知状态'

}

const loadOrderList = async () => {

loading.value = true

try {

const { data } = await getOrderList(queryParams)

orderList.value = data.list

total.value = data.total

} catch (error) {

console.error('获取订单列表失败', error)

} finally {

loading.value = false

}

const handleSearch = () => {

queryParams.page = 1

loadOrderList()

}

const handleReset = () => {

Object.assign(queryParams, {

status: '',

page: 1,

size: 10

})

loadOrderList()

}

const handlePageChange = (page: number) => {

queryParams.page = page

loadOrderList()

}

onMounted(() => {

loadOrderList()

})

</script>

5. Element Plus高级组件实战

5.1 时间选择器定制化

项目中经常需要限制可选择的时间范围，比如只能选择未来时间，或者特定时间段。

VUE

<el-date-picker

v-model="serviceTime"

type="datetime"

placeholder="选择服务时间"

:disabled-date="disabledDate"

:disabled-hours="disabledHours"

:disabled-minutes="disabledMinutes"

</template>

import { ref } from 'vue'

const serviceTime = ref('')

// 禁用今天之前的日期

const disabledDate = (time: Date) => {

return time.getTime() < Date.now() - 24 * 60 * 60 * 1000

}

// 禁用非工作时间（8:00-18:00之外）

const disabledHours = () => {

const hours = []

for (let i = 0; i < 24; i++) {

if (i < 8 || i > 18) {

hours.push(i)

}

return hours

}

// 禁用非整点时间（只能选择整点）

const disabledMinutes = (selectedHour: number) => {

const minutes = []

for (let i = 1; i < 60; i++) {

minutes.push(i)

}

return minutes

}

</script>

5.2 表格分页保持位置

解决表格切换分页后滚动条回到顶部的问题，提升用户体验。

VUE

<el-table

:data="tableData"

@sort-change="handleSortChange"

@filter-change="handleFilterChange"

</el-table>

<el-pagination

@size-change="handleSizeChange"

@current-change="handlePageChange"

:current-page="currentPage"

:page-size="pageSize"

:total="total"

</div>

</template>

import { ref, onMounted, onBeforeUnmount } from 'vue'

const tableContainer = ref<HTMLElement>()

const currentPage = ref(1)

const pageSize = ref(10)

const total = ref(0)

const scrollTop = ref(0)

// 保存滚动位置

const saveScrollPosition = () => {

if (tableContainer.value) {

scrollTop.value = tableContainer.value.scrollTop

}

// 恢复滚动位置

const restoreScrollPosition = () => {

if (tableContainer.value && scrollTop.value > 0) {

setTimeout(() => {

tableContainer.value!.scrollTop = scrollTop.value

}, 0)

}

const handlePageChange = async (page: number) => {

saveScrollPosition()

currentPage.value = page

await loadTableData()

restoreScrollPosition()

}

const handleSizeChange = async (size: number) => {

saveScrollPosition()

pageSize.value = size

currentPage.value = 1

await loadTableData()

restoreScrollPosition()

}

// 排序和筛选也需保持位置

const handleSortChange = async () => {

saveScrollPosition()

await loadTableData()

restoreScrollPosition()

}

const handleFilterChange = async () => {

saveScrollPosition()

currentPage.value = 1

await loadTableData()

restoreScrollPosition()

}

</script>

.table-container {

height: 600px;

overflow-y: auto;

}

</style>

6. 支付功能集成实战

支付功能是项目中技术难度较高的模块，需要处理安全性、状态同步和用户体验等问题。

6.1 支付组件封装

VUE

<el-dialog v-model="visible" title="支付" width="400px">

<div class="amount">支付金额：¥{{ amount }}</div>

<el-radio-group v-model="paymentMethod">

<el-radio label="wechat">微信支付</el-radio>

<el-radio label="alipay">支付宝</el-radio>

</el-radio-group>

<p>请使用{{ paymentMethod === 'wechat' ? '微信' : '支付宝' }}扫码支付</p>

</div>

<el-button @click="handleCancel">取消</el-button>

<el-button type="primary" @click="handleConfirm" :loading="paying">

</el-button>

</template>

</el-dialog>

</template>

import { ref, watch } from 'vue'

import { ElMessage } from 'element-plus'

import { createPayment, checkPaymentStatus } from '@/api/payment'

interface Props {

modelValue: boolean

orderId: number

amount: number

}

const props = defineProps<Props>()

const emit = defineEmits(['update:modelValue', 'success'])

const visible = ref(false)

const paymentMethod = ref('wechat')

const qrcodeUrl = ref('')

const paying = ref(false)

let checkTimer: number | null = null

watch(() => props.modelValue, (val) => {

visible.value = val

if (val) {

initPayment()

} else {

cleanup()

}

})

watch(visible, (val) => {

emit('update:modelValue', val)

if (!val) {

cleanup()

}

})

const initPayment = () => {

qrcodeUrl.value = ''

paymentMethod.value = 'wechat'

}

const handleConfirm = async () => {

if (!qrcodeUrl.value) {

await createQrcode()

} else {

await checkPayment()

}

const createQrcode = async () => {

paying.value = true

try {

const { data } = await createPayment({

orderId: props.orderId,

amount: props.amount,

method: paymentMethod.value

})

qrcodeUrl.value = data.qrcodeUrl

startPaymentCheck(data.paymentId)

} catch (error) {

ElMessage.error('生成支付码失败')

} finally {

paying.value = false

}

const startPaymentCheck = (paymentId: string) => {

checkTimer = window.setInterval(async () => {

try {

const { data } = await checkPaymentStatus(paymentId)

if (data.status === 'success') {

ElMessage.success('支付成功')

emit('success')

visible.value = false

} else if (data.status === 'failed') {

ElMessage.error('支付失败')

cleanup()

}

} catch (error) {

console.error('检查支付状态失败', error)

}

}, 3000)

}

const checkPayment = async () => {

// 手动检查支付状态

}

const handleCancel = () => {

visible.value = false

}

const cleanup = () => {

if (checkTimer) {

clearInterval(checkTimer)

checkTimer = null

}

</script>

6.2 支付状态管理

使用Pinia管理支付状态，确保数据一致性。

TYPESCRIPT

// store/payment.ts

import { defineStore } from 'pinia'

interface PaymentState {

currentPayment: any | null

paymentHistory: any[]

}

export const usePaymentStore = defineStore('payment', {

state: (): PaymentState => ({

currentPayment: null,

paymentHistory: []

}),

actions: {

setCurrentPayment(payment: any) {

this.currentPayment = payment

addPaymentRecord(record: any) {

this.paymentHistory.unshift(record)

// 只保留最近50条记录

if (this.paymentHistory.length > 50) {

this.paymentHistory = this.paymentHistory.slice(0, 50)

}

async refreshPaymentStatus(paymentId: string) {

try {

const { data } = await checkPaymentStatus(paymentId)

if (this.currentPayment?.id === paymentId) {

this.currentPayment.status = data.status

}

return data.status

} catch (error) {

console.error('刷新支付状态失败', error)

throw error

}

})

7. 路由守卫与权限控制

后台管理系统的权限控制是安全性的重要保障。

7.1 动态路由实现

根据用户角色动态生成可访问的路由。

TYPESCRIPT

// router/permission.ts

import { RouteRecordRaw } from 'vue-router'

// 异步路由（根据权限动态添加）

export const asyncRoutes: RouteRecordRaw[] = [

{

path: '/order',

component: () => import('@/views/order/OrderList.vue'),

meta: { title: '订单管理', requiresAuth: true, roles: ['admin', 'operator'] }

{

path: '/user',

component: () => import('@/views/user/UserList.vue'),

meta: { title: '用户管理', requiresAuth: true, roles: ['admin'] }

// 更多路由...

]

// 根据用户角色过滤路由

export function filterRoutes(routes: RouteRecordRaw[], roles: string[]): RouteRecordRaw[] {

return routes.filter(route => {

if (route.meta?.roles) {

return roles.some(role => route.meta!.roles.includes(role))

}

return true

})

}

7.2 按钮级权限控制

实现细粒度的权限控制，控制页面中具体按钮的显示。

VUE

import type { App } from 'vue'

export const permissionDirective = {

install(app: App) {

app.directive('permission', {

mounted(el, binding) {

const { value } = binding

const userRoles = JSON.parse(localStorage.getItem('userInfo') || '{}').roles || []

if (value && value instanceof Array && value.length > 0) {

const requiredRoles = value

const hasPermission = userRoles.some((role: string) => requiredRoles.includes(role))

if (!hasPermission) {

el.parentNode && el.parentNode.removeChild(el)

}

} else {

throw new Error('需要指定权限角色，如 v-permission="[\'admin\']"')

}

})

}

使用方式：

VUE

<div>

<el-button v-permission="['admin']">只有管理员可见</el-button>

<el-button v-permission="['admin', 'operator']">管理员和操作员可见</el-button>

</div>

</template>

8. 性能优化实践

8.1 组件懒加载

优化首屏加载速度，使用懒加载技术。

TYPESCRIPT

// router/index.ts

const routes: RouteRecordRaw[] = [

{

path: '/dashboard',

component: () => import(/* webpackChunkName: "dashboard" */ '@/views/Dashboard.vue')

{

path: '/order',

component: () => import(/* webpackChunkName: "order" */ '@/views/order/OrderList.vue')

}

]

8.2 API请求优化

实现请求防抖、缓存等优化策略。

TYPESCRIPT

// utils/request.ts

import axios from 'axios'

import { ElMessage } from 'element-plus'

// 创建axios实例

const service = axios.create({

baseURL: process.env.VUE_APP_BASE_API,

timeout: 10000

})

// 请求拦截器

service.interceptors.request.use(

config => {

const token = localStorage.getItem('token')

if (token) {

config.headers.Authorization = `Bearer ${token}`

}

return config

error => {

return Promise.reject(error)

}

)

// 响应拦截器

service.interceptors.response.use(

response => {

const { data } = response

if (data.code === 200) {

return data

} else {

ElMessage.error(data.message || '请求失败')

return Promise.reject(new Error(data.message || '请求失败'))

}

error => {

if (error.response?.status === 401) {

ElMessage.error('登录已过期，请重新登录')

localStorage.removeItem('token')

window.location.href = '/login'

} else {

ElMessage.error(error.message || '网络错误')

}

return Promise.reject(error)

}

)

export default service

9. 常见问题与解决方案

9.1 Vue3组合式API使用问题

问题： 在setup中使用async/await导致响应式数据丢失

解决方案： 使用ref或reactive包装异步数据

TYPESCRIPT

// 错误示例

const loadData = async () => {

const data = await api.getData() // data不是响应式的

}

// 正确示例

const data = ref(null)

const loadData = async () => {

const result = await api.getData()

data.value = result // 保持响应式

}

9.2 Element Plus样式覆盖问题

问题： 自定义样式被Element Plus默认样式覆盖

解决方案： 使用深度选择器或提高样式优先级

CSS

/* 使用深度选择器 */

:deep(.el-button) {

background-color: #409eff;

}

/* 或提高优先级 */

.container .el-button {

background-color: #409eff !important;

}

9.3 路由缓存问题

问题： 页面返回时数据状态丢失

解决方案： 使用keep-alive配合路由meta信息

VUE

<router-view v-slot="{ Component }">

<keep-alive :include="cachedViews">

</keep-alive>

</router-view>

</template>

import { computed } from 'vue'

import { useRoute } from 'vue-router'

const route = useRoute()

const cachedViews = computed(() => {

return route.meta.keepAlive ? [route.name] : []

})

</script>

10. 项目部署与生产环境优化

10.1 构建配置优化

JAVASCRIPT

// vite.config.js

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

export default defineConfig({

plugins: [vue()],

build: {

rollupOptions: {

output: {

manualChunks: {

'element-plus': ['element-plus'],

'vue-vendor': ['vue', 'vue-router', 'pinia']

}

server: {

proxy: {

'/api': {

target: 'http://localhost:3000',

changeOrigin: true

}

})

10.2 环境变量配置

ENV

# .env.production

VITE_APP_BASE_API=https://api.yourdomain.com

VITE_APP_TITLE=滴滴陪诊后台管理系统

# .env.development

VITE_APP_BASE_API=http://localhost:3000

VITE_APP_TITLE=滴滴陪诊后台管理系统(开发版)

这个Vue3实战项目的真正价值在于它提供了一个完整的企业级应用开发范式。通过49讲的系统学习，你不仅能掌握Vue3的核心技术，更重要的是能够理解真实项目中的架构决策和工程化实践。

建议在学习过程中，不要仅仅满足于代码复制，而是要思考每个技术选择背后的原因，这样才能在未来的项目中做出更好的技术决策。