当前位置: 首页 > news >正文

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.jssrc/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. 按钮级权限通过自定义指令控制显示。
http://www.hskmm.com/?act=detail&tid=21553

相关文章:

  • 2025 年国内工作服厂家最新推荐排行榜:聚焦工艺设计与服务,精选权威榜单助企业采购冬季/春季/工人/车间/防静电/餐饮/劳保工作服厂家推荐
  • ClickHouse 窗口函数使用详解(一) - 若
  • ClickHouse 窗口函数详解:告别 GROUP BY 的局限性,实现灵活数据分析 - 若
  • 简单WEB网站
  • AtCoder AGC044 总结
  • UOJ#32【UR #2】跳蚤公路 题解
  • 2025 年窗帘杆源头厂家最新推荐榜单:包含支架 / 环 / 全自动 / 可伸缩等多类产品及配件,帮助选到品质与交期双优的优质厂家
  • 2025 年电动窗帘厂家推荐榜单:聚焦国内优质企业定制实力与口碑,为采购者提供最新选择参考电动窗帘系统/电机/轨道/配件/智能电动窗帘厂家推荐
  • Vue3 使用注意事项
  • ClickHouse ReplacingMergeTree 去重陷阱:为什么你的 FINAL 查询无效? - 若
  • js中?? 和 || 的区别详解
  • 微信机器人API接口| 个人开发者必备
  • 直击现场! “ 直通乌镇 ”开源赛复赛收官,OpenCSG担任评委,十强藏着哪些产业机会?
  • Python 列表生成式、字典生成式与生成器表达式
  • java 解析json字符串,获取特定的字段值,JsonObject
  • python 批量提取txt数据中的值写入csv
  • 回忆中学的函数
  • Java 一行一行的读取文本,小Demo 大学问
  • 家里wifi电信出口ip如何控制不变,解决访问云服务器上面的资源
  • 2025 年挤压造粒机源头厂家最新推荐榜单:前五企业技术实力、服务能力及口碑测评指南对辊挤压/化肥挤压/干粉挤压造粒机厂家推荐
  • MYSQL数据库取消表的约束
  • 2025 年京东 e 卡回收平台最新推荐排行榜:权威测评实时结算平台,助力用户安全高效转让京东 e 卡
  • 2025 年支付宝消费券回收平台最新推荐榜单:优质平台权威测评,助您高效安全处理闲置消费券支付宝消费券回收/闲置支付宝消费券回收/支付宝消费券快速回收平台推荐
  • ICP备案查询网站 域名备案查询
  • 2025 年注浆管厂家最新权威推荐排行榜:聚焦 R780/108 / 隧道 / 预埋 / 桩基等专用产品,精选 TOP5 优质企业
  • stable diffusion网络结构详解
  • 9.30
  • 网络与系统攻防技术实验一——逆向破解与Bof
  • 【python】解决grpcio.protoc生成的pb文件里面没有类和方法定义
  • 阙韩