环境准备
确保本地已安装 Node.js(建议版本 ≥14)和 npm/yarn。可通过以下命令检查版本:
node -v
npm -v
克隆项目
从 GitHub 克隆
模板项目:
git clone https://github.com/PanJiaChen/vue-element-admin.git
cd vue-element-admin
安装依赖
使用 npm 或 yarn 安装依赖包:
npm install
# 或
yarn install
运行开发环境
启动本地开发服务器,默认访问 http://localhost:9528
:
npm run dev
# 或
yarn dev
配置修改
根据需求调整项目配置:
- 接口代理:修改
vue.config.js
中的proxyTable
指向后端 API 地址。 - 全局变量:编辑
.env
文件设置环境变量(如VUE_APP_BASE_API
)。
构建生产环境
生成优化后的静态文件,输出至 dist
目录:
npm run build:prod
# 或
yarn build:prod
自定义主题
通过修改 src/styles/variables.scss
中的 SCSS 变量调整主题色、字体等样式。
路由与权限
- 路由配置:在
src/router/index.js
中添加或修改路由。 - 权限控制:基于
src/permission.js
实现动态路由和角色权限校验。
部署上线
将 dist
目录内容部署至 Nginx 或 Apache 服务器,需配置路由重定向(History 模式):
location / {try_files $uri $uri/ /index.html;
}
vue-element-admin 常用方法
vue-element-admin 是一个基于 Vue.js 和 Element UI 的后台管理系统解决方案,提供了丰富的功能和组件。以下是一些常用的方法和技巧:
路由配置与权限控制
在 src/router/index.js
中配置动态路由,结合 src/permission.js
实现权限控制。
使用 router.addRoutes
动态添加路由,根据用户角色过滤路由表。
// 示例:动态路由过滤
const accessedRoutes = asyncRoutes.filter(route => {if (hasPermission(roles, route)) {if (route.children) {route.children = route.children.filter(child => {return hasPermission(roles, child);});}return true;}return false;
});
API 请求封装
src/utils/request.js
封装了 Axios 请求,支持拦截器和错误处理。
常用方法包括:
request.get(url, params)
request.post(url, data)
request.put(url, data)
request.delete(url, params)
// 示例:获取用户列表
export function getUserList(params) {return request({url: '/user/list',method: 'get',params});
}
状态管理(Vuex)
在 src/store
中管理全局状态,常用模块包括:
user.js
:用户信息、登录状态permission.js
:路由权限tagsView.js
:页面标签导航
// 示例:用户登录 Action
login({ commit }, userInfo) {return new Promise((resolve, reject) => {login(userInfo).then(response => {const { data } = response;commit('SET_TOKEN', data.token);resolve();}).catch(error => {reject(error);});});
}
组件封装与复用
常用封装组件包括:
- 表格组件:基于
el-table
封装分页和搜索功能。 - 表单组件:动态生成表单,支持验证规则。
- 图表组件:集成 ECharts,封装常用图表类型。
// 示例:动态表单验证规则
rules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }]
}
主题与样式定制
通过修改 src/styles/variables.scss
定制主题色和样式。
支持动态切换主题,使用 vue-element-admin
提供的 themePicker
组件。
// 示例:修改主题色
$--color-primary: #1890ff;
$--menu-background: #304156;
国际化支持
src/lang
目录下配置多语言文件(如中文 zh.js
和英文 en.js
)。
使用 vue-i18n
切换语言:
// 示例:切换语言
this.$i18n.locale = 'zh';
工具函数
src/utils
提供常用工具函数:
parseTime
:时间格式化download
:文件下载deepClone
:深拷贝
// 示例:时间格式化
parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}');
部署与构建
- 使用
npm run build
打包项目。 - 通过
nginx
配置代理和静态资源路径。 - 修改
vue.config.js
调整构建配置。
// 示例:配置代理
devServer: {proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true}}
}
以上是 vue-element-admin 的常用方法和实践,可根据实际需求进一步扩展和优化。
vue-element-admin 的鉴权管理
vue-element-admin 是一个基于 Vue.js 和 Element UI 的后台管理系统解决方案,其鉴权管理主要通过路由守卫、权限角色控制和动态路由实现。
路由守卫控制访问权限
路由守卫是 Vue Router 提供的功能,用于在路由跳转前进行权限验证。在 src/permission.js
中,通过 beforeEach
钩子实现全局路由守卫。
router.beforeEach(async (to, from, next) => {const hasToken = getToken()if (hasToken) {if (to.path === '/login') {next({ path: '/' })} else {const hasRoles = store.getters.roles && store.getters.roles.length > 0if (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')next(`/login?redirect=${to.path}`)}}}} else {if (whiteList.indexOf(to.path) !== -1) {next()} else {next(`/login?redirect=${to.path}`)}}
})
权限角色管理
权限角色存储在 Vuex 中,通过 src/store/modules/user.js
和 src/store/modules/permission.js
管理。用户登录后获取角色信息,并根据角色生成可访问的路由。
// user.js
const actions = {getInfo({ commit }) {return new Promise((resolve, reject) => {getInfo().then(response => {const { data } = responsecommit('SET_ROLES', data.roles)resolve(data)}).catch(error => {reject(error)})})}
}
动态路由生成
动态路由通过角色权限过滤生成。在 src/store/modules/permission.js
中,generateRoutes
方法根据角色过滤路由。
// permission.js
const actions = {generateRoutes({ commit }, roles) {return new Promise(resolve => {let accessedRoutesif (roles.includes('admin')) {accessedRoutes = asyncRoutes || []} else {accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)}commit('SET_ROUTES', accessedRoutes)resolve(accessedRoutes)})}
}
按钮级权限控制
按钮级权限通过自定义指令 v-permission
实现。在 src/directive/permission/permission.js
中定义指令,判断用户是否有权限显示按钮。
function checkPermission(el, binding) {const { value } = bindingconst roles = store.getters && store.getters.rolesif (value && value instanceof Array) {if (value.length > 0) {const permissionRoles = valueconst hasPermission = roles.some(role => {return permissionRoles.includes(role)})if (!hasPermission) {el.parentNode && el.parentNode.removeChild(el)}}} else {throw new Error(`need roles! Like v-permission="['admin','editor']"`)}
}
路由配置
路由分为常量路由和动态路由。常量路由如登录页、404 页等,动态路由根据权限动态添加。在 src/router/index.js
中配置基本路由。
export const constantRoutes = [{path: '/login',component: () => import('@/views/login/index'),hidden: true},{path: '/404',component: () => import('@/views/404'),hidden: true}
]
权限验证流程
- 用户登录后获取 token 和角色信息。
- 根据角色信息生成可访问的路由。
- 通过路由守卫验证每次路由跳转的权限。
- 动态添加路由到路由器。
- 按钮级权限通过自定义指令控制显示。