vue-admin-better极速上手：30分钟搭建企业级后台管理系统
vue-admin-better极速上手：30分钟搭建企业级后台管理系统
项目地址: https://gitcode.com/GitHub_Trending/vue/vue-admin-better 你是否还在为搭建企业级后台管理系统而烦恼？从零开始构建不仅耗时耗力，还需要处理权限管理、路由配置、UI组件等一系列复杂问题。本文将带你使用vue-admin-better框架，在短短30分钟内完成一个功能完善的企业级后台管理系统搭建，让你专注于业务逻辑开发而非基础架构。
读完本文后，你将能够：
- 快速搭建vue-admin-better开发环境
- 理解项目核心配置与目录结构
- 掌握路由与权限管理的基本使用
- 了解系统内置组件的应用方法
- 完成一个简单的后台管理系统原型
项目简介
vue-admin-better是一个基于Vue.js的企业级后台管理系统框架，支持Vue2和Vue3版本，集成了Element UI/Element Plus等主流UI组件库。该框架提供了完善的权限控制、路由管理、全局配置等功能，已被10万+项目实际应用，适合快速开发各类后台管理系统。
项目核心特性包括：
- RBAC模型 + JWT权限控制
- 40+高质量单页组件
- 支持PC、手机端、平板跨平台使用
- 后端路由动态渲染
- 50余项全局精细化配置
- 支持免费商用（保留MIT协议）
环境准备
在开始之前，请确保你的开发环境中已安装以下软件：
- Node.js（v12.0.0+）
- npm或yarn包管理工具
- Git版本控制工具
如果尚未安装Node.js，可以通过国内镜像站下载安装：Node.js国内镜像
快速开始
1. 克隆项目
打开终端，执行以下命令克隆项目代码库：
git clone -b master https://link.gitcode.com/i/a5ffce93cd7e7cb21e66a26131f414d7.git
2. 安装依赖
进入项目目录，使用npm安装项目依赖：
cd vue-admin-better
npm i --registry=http://mirrors.cloud.tencent.com/npm/
提示：使用腾讯云npm镜像可以加快依赖安装速度，如果你所在网络环境访问受限，也可以使用淘宝npm镜像：
npm i --registry=https://registry.npmmirror.com
3. 启动开发服务器
依赖安装完成后，执行以下命令启动本地开发服务器：
npm run serve
启动成功后，你将看到类似以下输出：
App running at:
- Local: http://localhost:81/
- Network: http://192.168.1.100:81/
现在，打开浏览器访问 http://localhost:81 即可看到系统登录页面。
项目结构解析
了解项目目录结构有助于你更快熟悉框架，以下是vue-admin-better的核心目录结构：
vue-admin-better/
├── src/ # 源代码目录
│ ├── api/ # API请求接口
│ ├── assets/ # 静态资源文件
│ ├── components/ # 全局组件
│ ├── config/ # 项目配置文件
│ ├── layouts/ # 布局组件
│ ├── plugins/ # 插件配置
│ ├── router/ # 路由配置
│ ├── store/ # Vuex状态管理
│ ├── styles/ # 全局样式
│ ├── utils/ # 工具函数
│ ├── views/ # 页面视图
│ ├── App.vue # 应用入口组件
│ └── main.js # 应用入口文件
├── mock/ # 模拟数据
├── public/ # 公共静态资源
├── package.json # 项目依赖配置
└── vue.config.js # Vue配置文件
核心配置文件说明：
- src/config/setting.config.js：项目全局设置，包括标题、端口、路由模式等
- src/router/index.js：路由配置文件，定义了系统路由结构
- src/main.js：应用入口文件，初始化Vue实例并加载插件
核心功能配置
1. 全局设置
项目的全局配置集中在src/config/setting.config.js文件中，你可以根据需求修改以下常用配置：
const setting = {
// 项目标题
title: 'vue-admin-better',
// 开发环境端口号
devPort: '81',
// 路由模式，可选值为 history 或 hash
routerMode: 'hash',
// 不经过token校验的路由
routesWhiteList: ['/login', '/register', '/404', '/401'],
// 是否显示顶部进度条
progressBar: true,
// 登录RSA加密
loginRSA: true,
// 权限控制方式
authentication: 'intelligence'
}
2. 路由配置
路由配置文件src/router/index.js定义了系统的路由结构，分为常量路由(constantRoutes)和异步路由(asyncRoutes)：
- 常量路由：不需要权限校验的路由，如登录页、404页等
- 异步路由：需要根据用户权限动态加载的路由
添加新路由示例：
// 在asyncRoutes数组中添加
{
path: '/dashboard',
component: Layout,
children: [
{
path: 'index',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: {
title: '数据看板',
icon: 'dashboard',
permissions: ['admin', 'editor'] // 所需权限
}
}
]
}
3. 权限管理
vue-admin-better支持两种权限控制方式（在setting.config.js中配置）：
- intelligence：前端控制路由权限，后端只控制permissions
- all：完全由后端控制路由
权限相关文件：
- src/utils/permission.js：权限控制核心逻辑
- src/store/modules/user.js：用户信息及权限存储
系统界面介绍
成功登录系统后，你将看到以下主要界面元素：
- 顶部导航栏：包含logo、面包屑导航、用户信息、主题切换等
- 侧边菜单栏：系统功能模块导航，支持多级菜单
- 主内容区：展示当前页面内容
- 底部版权信息：显示系统版权信息
系统内置了丰富的组件和页面示例，位于src/views/vab/目录下，包括表格、表单、图标、地图等常用组件：
自定义开发
1. 创建新页面
在src/views/目录下创建新的页面组件，例如创建一个"数据统计"页面：
- 创建文件
src/views/statistics/index.vue - 添加路由配置（在src/router/index.js的asyncRoutes中）
- 在侧边菜单中显示（通过菜单管理配置或直接在路由meta中设置icon和title）
2. 发起API请求
系统已封装axios请求，可直接在api目录下创建接口文件：
// src/api/statistics.js
import request from '@/utils/request'
export function getStatisticsData(params) {
return request({
url: '/statistics/data',
method: 'get',
params
})
}
在组件中使用：
import { getStatisticsData } from '@/api/statistics'
export default {
methods: {
fetchData() {
getStatisticsData({ type: 'day' }).then(res => {
console.log(res.data)
})
}
}
}
3. 使用Mock数据
项目内置mock服务，可在mock/controller/目录下创建模拟数据接口：
// mock/controller/statistics.js
const Mock = require('mockjs')
module.exports = [
{
url: '/statistics/data',
type: 'get',
response: config => {
return {
code: 200,
data: {
total: Mock.mock('@integer(1000, 2000)'),
list: Mock.mock([
{ date: '2023-01-01', value: '@integer(100, 500)' },
// ...更多数据
])
}
}
}
}
]
打包部署
开发完成后，执行以下命令打包项目：
npm run build
打包完成后，生成的静态文件位于dist/目录下，可直接部署到Nginx、Apache等Web服务器。
常见问题
Q: 启动项目时报错"端口已被占用"怎么办？
A: 可以修改src/config/setting.config.js中的devPort配置，更换其他端口号。
Q: 如何关闭RSA登录加密？
A: 在src/config/setting.config.js中设置loginRSA: false即可。
Q: 如何修改系统主题颜色？
A: 编辑src/styles/variables.scss文件，修改$primary-color等变量。
Q: 如何添加自定义图标？
A: 可将SVG图标文件放入src/remixIcon/svg/或src/colorfulIcon/svg/目录，然后通过<vab-icon />组件使用。
总结
通过本文的介绍，你已经了解了vue-admin-better框架的基本使用方法，包括环境搭建、项目配置、路由管理、权限控制等核心功能。该框架提供了丰富的组件和完善的架构设计，能够帮助你快速开发企业级后台管理系统。
更多详细功能和高级用法，请参考项目源码及相关文档：
希望本文对你有所帮助，祝你的项目开发顺利！
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
22
0- 0
已为社区贡献38条内容
所有评论(0)