搭建Vue3 Admin Plus 框架

Vue3 Admin Plus 是一个基于 Vue 3 和 Vite 的后台管理模板，通常包含了 Element Plus 作为 UI 库，并且集成了常见的管理系统功能，如权限管理、菜单配置、国际化等。以下是如何从头搭建 Vue3 Admin Plus 项目的步骤。

目录

1. 克隆 Vue3 Admin Plus 项目模板

2. 安装依赖

3. 运行开发服务器

4. 项目结构概览

5. 项目功能配置

a. 路由配置

b. 权限管理

c. 国际化支持

d. Element Plus UI 库

6. 打包和部署

7. 环境变量配置

8. 项目扩展

9. 总结

---

1. 克隆 Vue3 Admin Plus 项目模板

首先，您可以通过以下方式从 GitHub 上克隆 Vue3 Admin Plus 项目模板：

git clone https://github.com/jzfai/vue3-admin-plus.git

进入项目目录：

cd vue3-admin-plus

2. 安装依赖

在项目目录下运行以下命令来安装依赖项：

npm install

或使用 Yarn：

yarn install

3. 运行开发服务器

安装完依赖后，运行开发服务器以启动项目：

npm run dev

或使用 Yarn：

yarn dev

这个命令将启动本地开发服务器，您可以通过 http://localhost:3000 访问。

4. 项目结构概览

项目的目录结构大致如下：

vue3-admin-plus/
├── public/                         # 公共静态资源
├── src/                            # 源代码目录
│   ├── api/                        # API 接口定义
│   ├── assets/                     # 静态资源
│   ├── components/                 # 公共组件
│   ├── layout/                     # 布局相关文件
│   ├── router/                     # 路由配置
│   ├── store/                      # 状态管理（Pinia 或 Vuex）
│   ├── views/                      # 页面组件
│   ├── App.vue                     # 根组件
│   ├── main.js                     # 入口文件
│   ├── permission.js               # 权限控制
│   └── settings.js                 # 项目设置
├── .env.development                # 开发环境变量
├── .env.production                 # 生产环境变量
├── vite.config.js                  # Vite 配置文件
├── package.json                    # 项目依赖配置文件
└── README.md                       # 项目说明文件

5. 项目功能配置

a. 路由配置

路由文件位于 src/router 目录下，包含了项目的路由配置。可以根据需要添加、修改或删除路由。

import { createRouter, createWebHistory } from 'vue-router'
import Layout from '@/layout/index.vue'

const routes = [
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index.vue'),
        meta: { title: 'Dashboard', icon: 'dashboard' }
      }
    ]
  },
  // 其他路由配置...
]

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

export default router

b. 权限管理

权限管理的核心是通过 src/permission.js 文件来控制访问。通过在路由的 meta 属性中定义 roles 来指定哪些角色可以访问特定路由。

import router from './router'
import store from './store'
import { ElMessage } from 'element-plus'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach(async (to, from, next) => {
  const hasToken = store.getters.token
  if (hasToken) {
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      if (hasRoles) {
        next()
      } else {
        try {
          const { roles } = await store.dispatch('user/getInfo')
          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
          router.addRoutes(accessRoutes)
          next({ ...to, replace: true })
        } catch (error) {
          await store.dispatch('user/resetToken')
          ElMessage.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
        }
      }
    }
  } else {
    if (['/login', '/auth-redirect'].indexOf(to.path) !== -1) {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
    }
  }
})

c. 国际化支持

项目通常集成了国际化插件，可以通过 src/locales 目录进行多语言配置。你可以根据需求添加新的语言包。

import { createI18n } from 'vue-i18n'
import en from './en'
import zh from './zh'

const messages = {
  en,
  zh
}

const i18n = createI18n({
  locale: 'en',
  messages
})

export default i18n

在 main.js 中注册：

import { createApp } from 'vue'
import i18n from './locales'
import App from './App.vue'

const app = createApp(App)
app.use(i18n)
app.mount('#app')

d. Element Plus UI 库

Vue3 Admin Plus 使用 Element Plus 作为 UI 组件库，通常在 main.js 中进行全局引入：

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

const app = createApp(App)
app.use(ElementPlus)

6. 打包和部署

开发完成后，可以通过以下命令来打包项目：

npm run build

或使用 Yarn：

yarn build

打包后会生成 dist 文件夹，其中包含了所有的静态资源文件。将这些文件上传到服务器即可部署。

7. 环境变量配置

项目使用 .env 文件进行环境变量配置。你可以在 env.development 或 env.production 中添加或修改环境变量。

# .env.development
VITE_APP_BASE_API = '/dev-api'

# .env.production
VITE_APP_BASE_API = '/prod-api'

在代码中使用 import.meta.env.VITE_APP_BASE_API 访问这些变量。

8. 项目扩展

你可以根据业务需求进一步扩展项目，例如：

• 集成更多第三方库：如图表库 (ECharts)、富文本编辑器 (Quill) 等。
• 优化权限管理：根据实际需要完善权限验证机制。
• 添加更多国际化支持：根据用户需求增加新的语言包。

9. 总结

Vue3 Admin Plus 提供了一个现代化的 Vue 3 后台管理模板，具备完善的功能和优秀的性能。通过上述步骤，您可以快速搭建并部署一个功能强大的后台管理系统。如果需要更多定制化功能，您可以进一步扩展和配置该框架。