当前位置：首页 > VUE

vue管理系统项目实现

2026-01-22 19:42:39VUE

Vue 管理系统项目实现指南

技术选型与基础搭建

Vue 3 + TypeScript + Vite 作为基础开发环境，搭配 Vue Router 和 Pinia 实现路由与状态管理。Element Plus 或 Ant Design Vue 提供 UI 组件库支持。

安装基础依赖：

npm create vite@latest admin-system --template vue-ts
cd admin-system
npm install vue-router pinia element-plus axios

项目结构设计

典型目录结构示例：

src/
├── api/                # 接口封装
├── assets/             # 静态资源
├── components/         # 公共组件
├── router/             # 路由配置
├── stores/             # Pinia状态管理
├── styles/             # 全局样式
├── utils/              # 工具函数
├── views/              # 页面组件
├── App.vue
└── main.ts

核心功能实现

路由配置示例（router/index.ts）：

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

const routes = [
  {
    path: '/',
    component: () => import('@/views/Layout.vue'),
    children: [
      { path: '', component: () => import('@/views/Home.vue') },
      { path: 'user', component: () => import('@/views/User.vue') }
    ]
  },
  { path: '/login', component: () => import('@/views/Login.vue') }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

状态管理示例（stores/user.ts）：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: localStorage.getItem('token') || '',
    userInfo: null
  }),
  actions: {
    async login(params: LoginParams) {
      const res = await api.login(params)
      this.token = res.token
      localStorage.setItem('token', res.token)
    }
  }
})

权限控制方案

实现路由守卫（router/index.ts）：

router.beforeEach((to, from, next) => {
  const store = useUserStore()
  if (to.path !== '/login' && !store.token) {
    next('/login')
  } else {
    next()
  }
})

动态路由加载可通过后端返回权限菜单，前端递归生成路由配置。

API 封装示例

统一请求拦截（utils/request.ts）：

import axios from 'axios'

const service = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 5000
})

service.interceptors.request.use(config => {
  const store = useUserStore()
  if (store.token) {
    config.headers.Authorization = `Bearer ${store.token}`
  }
  return config
})

典型页面组件

用户管理页面示例（views/User.vue）：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="role" label="角色" />
  </el-table>
  <el-pagination 
    :current-page="pagination.page"
    @current-change="handlePageChange"
  />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getUserList } from '@/api/user'

const tableData = ref([])
const pagination = ref({ page: 1, size: 10 })

const fetchData = async () => {
  const res = await getUserList(pagination.value)
  tableData.value = res.data
}

onMounted(fetchData)
</script>

构建优化

vite.config.ts 生产环境配置：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    chunkSizeWarningLimit: 2000,
    rollupOptions: {
      output: {
        manualChunks: {
          'element-plus': ['element-plus']
        }
      }
    }
  }
})

部署方案

推荐使用 Docker 容器化部署，示例 Dockerfile：

vue管理系统项目实现

FROM node:16 as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80