Vue 3 + Vite 5 + Pinia 开源 Admin 模板开发全流程

1. 项目初始化

npm create vite@latest vue-admin --template vue
cd vue-admin
npm install pinia @pinia/nuxt axios vue-router

• 配置基础结构：

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

2. 性能优化策略

• Vite 5 优化：

  // vite.config.js
  export default {
    build: {
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return 'vendor'
            }
          }
        }
      }
    }
  }
  

• 组件级优化：
  • 使用异步组件加载：defineAsyncComponent(() => import('@/views/User.vue'))
  • 静态资源懒加载：<img loading="lazy" src="...">
• Pinia 状态管理：

  // stores/user.js
  import { defineStore } from 'pinia'
  export const useUserStore = defineStore('user', {
    state: () => ({ token: '', roles: [] }),
    actions: {
      async login(credentials) {
        const res = await api.login(credentials)
        this.token = res.data.token
      }
    }
  })
  

3. 路由与权限设计

• 动态路由表：

  // router/index.js
  const dynamicRoutes = [
    {
      path: '/dashboard',
      component: () => import('@/views/Dashboard.vue'),
      meta: { requiresAuth: true, permissions: ['admin'] }
    },
    {
      path: '/user',
      component: () => import('@/views/User.vue'),
      meta: { requiresAuth: true, permissions: ['admin', 'editor'] }
    }
  ]
  

• 权限拦截逻辑：

  router.beforeEach((to) => {
    const userStore = useUserStore()
    if (to.meta.requiresAuth && !userStore.token) return '/login'
    if (to.meta.permissions && !to.meta.permissions.some(p => userStore.roles.includes(p))) {
      return '/403'
    }
  })
  

• 菜单权限过滤：

  <!-- Layout.vue -->
  <template v-for="menu in menus">
    <div v-if="hasPermission(menu.roles)">
      {{ menu.title }}
    </div>
  </template>
  

4. 关键模块实现

• API 封装：

  // utils/request.js
  axios.interceptors.request.use(config => {
    config.headers.Authorization = `Bearer ${useUserStore().token}`
    return config
  })
  

• 主题切换：

  :root {
    --primary-color: #1890ff;
  }
  [data-theme="dark"] {
    --primary-color: #52c41a;
  }
  

  // stores/theme.js
  const setTheme = (theme) => {
    document.documentElement.setAttribute('data-theme', theme)
  }
  

5. 开源工程化

• 代码规范：
  • 配置 ESLint + Prettier
  • 添加 .editorconfig
• 自动化部署：

  # .github/workflows/deploy.yml
  name: Deploy
  on: [push]
  jobs:
    build:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v4
        - run: npm ci
        - run: npm run build
        - uses: peaceiris/gh-pages@v3
          with:
            github_token: ${{ secrets.GITHUB_TOKEN }}
            publish_dir: dist
  

6. 最佳实践总结

1. 性能关键点：

   • 使用 Vite 的 PWA 插件实现离线缓存
   • 路由组件分割：component: () => import(/* webpackChunkName: "dashboard" */ './Dashboard.vue')
   • 状态持久化：pinia-plugin-persistedstate

2. 权限设计原则：

   • 前端路由权限 + 后端接口验证双重保障
   • RBAC（角色权限）与 ABAC（属性权限）结合
   • 权限变更时自动刷新路由表

3. 扩展性方案：

   // 插件系统
   export const loadPlugins = (app) => {
     const files = import.meta.glob('./plugins/*.js')
     Object.values(files).forEach(async (plugin) => {
       const { default: setup } = await plugin()
       setup(app)
     })
   }
   

完整模板开发周期约 2-3 周，建议采用模块化开发流程：

1. 基础框架搭建（3天）
2. 核心模块实现（5天）
3. 权限系统集成（3天）
4. 性能优化测试（2天）
5. 文档与开源准备（3天）