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 > 0
      if (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 } = response
        commit('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 accessedRoutes
      if (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 } = binding
  const roles = store.getters && store.getters.roles
  if (value && value instanceof Array) {
    if (value.length > 0) {
      const permissionRoles = value
      const 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. 按钮级权限通过自定义指令控制显示。