一、项目初始化与工程化配置

1.1 基于Vite的现代化项目脚手架

企业级项目开发需从构建工具选型开始，Vite作为新一代前端构建工具，凭借其基于ES Module的冷启动优势，在开发环境启动速度上较传统工具提升数十倍。通过npm create vite@latest命令初始化项目时，需重点关注以下配置：

// vite.config.js 基础配置示例
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src') // 路径别名配置
    }
  },
  server: {
    port: 3000,
    proxy: { // 开发环境代理配置
      '/api': {
        target: 'http://backend-service',
        changeOrigin: true
      }
    }
  }
})

1.2 目录结构规范化设计

合理的目录结构是项目可维护性的基础，推荐采用分层架构：

src/
├── assets/          # 静态资源
├── components/       # 公共组件
├── composables/      # 组合式函数
├── router/           # 路由配置
├── stores/           # Pinia状态管理
├── styles/           # 全局样式
├── utils/            # 工具函数
├── views/            # 页面组件
├── App.vue           # 根组件
└── main.js           # 应用入口

1.3 路由系统深度优化

企业级路由需实现权限控制、动态加载和404处理：

// router/index.js 配置示例
const routes = [
  {
    path: '/login',
    component: () => import('@/views/Login.vue'),
    meta: { requiresAuth: false }
  },
  {
    path: '/dashboard',
    component: () => import('@/layouts/MainLayout.vue'),
    meta: { requiresAuth: true },
    children: [
      // 子路由配置
    ]
  },
  {
    path: '/:pathMatch(.*)*',
    component: () => import('@/views/NotFound.vue') // 404处理
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return savedPosition || { top: 0 } // 滚动行为控制
  }
})

二、登录认证体系构建

2.1 表单验证与用户体验优化

采用Vuelidate进行响应式表单验证，结合Element Plus组件库实现：

<template>
  <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-form>
</template>
<script setup>
import { reactive, ref } from 'vue'
const form = reactive({
  username: '',
  password: ''
})
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ]
}
const loginForm = ref(null)
const submitForm = async () => {
  try {
    await loginForm.value.validate()
    // 提交逻辑
  } catch (error) {
    console.error('验证失败:', error)
  }
}
</script>

2.2 Axios请求模块封装

企业级API请求需处理拦截器、错误重试和统一响应格式：

// utils/request.js 封装示例
import axios from 'axios'
const service = axios.create({
  baseURL: '/api',
  timeout: 10000
})
// 请求拦截器
service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }
    return config
  },
  error => Promise.reject(error)
)
// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
      return Promise.reject(new Error(res.message || 'Error'))
    }
    return res.data
  },
  error => {
    if (error.response.status === 401) {
      // 处理token过期
    }
    return Promise.reject(error)
  }
)
export default service

2.3 状态管理与持久化

采用Pinia替代Vuex实现更简洁的状态管理，结合插件实现持久化：

// stores/user.js 状态定义
import { defineStore } from 'pinia'
import { persist } from 'pinia-plugin-persistedstate'
export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    userInfo: null
  }),
  actions: {
    setToken(token) {
      this.token = token
    },
    setUserInfo(info) {
      this.userInfo = info
    }
  },
  plugins: [persist({
    paths: ['token'], // 仅持久化token
    storage: localStorage
  })]
})

三、后台管理系统架构

3.1 动态权限路由实现

通过路由元信息与菜单数据动态生成可访问路由：

// 路由守卫实现
router.beforeEach(async (to, from, next) => {
  const userStore = useUserStore()
  const hasToken = !!userStore.token
  if (hasToken) {
    if (to.path === '/login') {
      next('/dashboard')
    } else {
      try {
        const { roles } = await getUserInfo() // 获取用户角色
        const accessRoutes = await filterAsyncRoutes(roles) // 过滤路由
        accessRoutes.forEach(route => router.addRoute(route))
        next({ ...to, replace: true })
      } catch (error) {
        next(`/login?redirect=${to.path}`)
      }
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
    }
  }
})

3.2 主框架组件开发

典型后台布局包含侧边栏、顶部导航和内容区域：

<template>
  <div class="app-wrapper">
    <Sidebar />
    <div class="main-container">
      <Navbar />
      <AppMain />
    </div>
  </div>
</template>
<style scoped>
.app-wrapper {
  display: flex;
  height: 100vh;
  .main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}
</style>

3.3 系统功能增强

实现浏览器全屏、密码修改等辅助功能：

// 全屏功能实现
const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen().catch(err => {
      console.error(`全屏错误: ${err.message}`)
    })
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
  }
}
// 密码修改组件
const changePassword = async () => {
  try {
    await updatePassword({
      oldPassword: form.oldPassword,
      newPassword: form.newPassword
    })
    ElMessage.success('密码修改成功')
    // 清除敏感信息
    form.oldPassword = ''
    form.newPassword = ''
  } catch (error) {
    ElMessage.error(error.message)
  }
}

四、性能优化与最佳实践

代码分割：通过动态import实现路由级代码分割
按需引入：Element Plus等组件库采用按需加载
防抖节流：在搜索、滚动等高频事件中使用
骨架屏：配合Vite的预构建特性实现
错误监控：集成Sentry等错误追踪系统

企业级Vue.js 3开发需要系统化的工程思维，通过合理的架构设计、严格的代码规范和完善的监控体系，才能构建出高可用、易维护的前端应用。本文介绍的实践方案已在多个中大型项目中验证，开发者可根据实际业务需求进行调整优化。

Vue.js 3 企业级项目开发全流程解析与实战指南