Vue-element-admin开发指南 - 教程

环境准备

确保本地已安装 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);});});
}

---

组件封装与复用

常用封装组件包括：

1. 表格组件：基于 el-table 封装分页和搜索功能。
2. 表单组件：动态生成表单，支持验证规则。
3. 图表组件：集成 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}
]

权限验证流程

1. 用户登录后获取 token 和角色信息。
2. 根据角色信息生成可访问的路由。
3. 通过路由守卫验证每次路由跳转的权限。
4. 动态添加路由到路由器。
5. 按钮级权限通过自定义指令控制显示。