环境准备
确保本地已安装 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 和角色信息。
- 根据角色信息生成可访问的路由。
- 通过路由守卫验证每次路由跳转的权限。
- 动态添加路由到路由器。
- 按钮级权限通过自定义指令控制显示。
