返回 导航

Vue.js

hangge.com

Vue.js - 后台管理系统模板项目推荐4（vue-element-admin、Vue2时代经典模板）

作者：hangge | 2026-09-17 08:53
    作为 Vue2 时代几乎属于“现象级”后台模板，vue-element-admin 是基于 Vue2 + Element UI 开发的后台管理系统前端解决方案，内置了权限控制、动态路由、表格、表单、国际化等企业级后台必备功能，开箱即用，是国内最流行的后台管理模板，能极大缩短后台项目的开发周期。本文将详细介绍 vue-element-admin 的安装、运行及常用功能。

四、 vue-element-admin（Vue2 时代最经典、最成功的模板项目）

1，基本介绍

（1）vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui 实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助我们快速搭建企业级中后台产品原型。

（2）它还有一个精简版本，实际项目开发更推荐用精简版本。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。

2，核心技术栈

  • Vue 2.x：项目核心前端框架，支撑整个项目架构。
  • Element UI：适配 Vue2 的后台系统 UI 组件库，搭建页面界面。
  • Vue Router 3.x：实现页面跳转、路由权限与侧边栏菜单生成。
  • Vuex 3.x：全局状态管理，存储用户、权限、Token 等公共数据。
  • Axios：封装网络请求，统一处理前后端接口交互与拦截逻辑。
  • Webpack 4：项目工程化构建工具，负责编译、打包与热更新。
  • Sass/SCSS：CSS 预处理器，用于编写全局与模块化样式。
  • Mock.js：本地模拟后端接口数据，支持前后端并行开发。

3，项目优缺点

（1）优点：
  • 开箱即用，内置后台管理系统全套核心功能，开发效率极高
  • 技术栈成熟稳定，配套学习资料和社区解决方案丰富
  • 路由、权限、网络请求深度封装，无需从零搭建基础架构
  • 代码规范统一，目录结构清晰，适配团队协作开发
  • 支持动态路由、角色权限控制，满足企业级业务场景
（2）缺点：
  • 仅支持 Vue2，技术栈老旧，不兼容 Vue3 生态
  • 对 Node.js 版本限制严格，高版本环境易报错
  • 完整版功能冗余，精简版需手动改造适配自身业务
  • 基于 Webpack4 构建，打包和热更新速度远慢于 Vite
  • 项目停止迭代更新，无后续维护和技术升级

4，准备工作

    由于 vue-element-admin 基于 Vue2，Node.js 版本建议控制在 12~16 之间（推荐 14.x），高版本可能会报错。我们只需要访问其官网下载安装即可。

5，下载项目

（1）在 CMD 终端种执行如下命令克隆代码，然后进入项目：
git clone https://github.com/PanJiaChen/vue-element-admin.git
cd vue-element-admin

（2）整个项目的核心目录结构如下： 
vue-admin-template/
├── public/           # 静态资源（不打包的文件，如favicon）
├── src/              # 核心源码（99%开发都在这里）
│   ├── api/          # 所有接口请求封装（axios）
│   ├── assets/       # 静态资源（图片、字体）
│   ├── components/   # 公共组件（全局复用的组件）
│   ├── directive/    # 全局指令（自定义DOM操作指令）
│   ├── filters/      # 全局过滤器（数据格式化工具）
│   ├── icons/        # 图标组件（svg图标）
│   ├── layout/       # 全局布局（侧边栏、导航栏、页脚）
│   ├── router/       # 路由配置（页面跳转、权限）
│   ├── store/        # Vuex 状态管理（全局数据共享）
│   ├── styles/       # 全局样式
│   ├── utils/        # 工具函数（请求封装、时间格式化等）
│   ├── vendor/       # 第三方库/插件（如Excel导出、图表库）
│   ├── views/        # 页面组件（所有业务页面都在这里）
│   ├── App.vue       # 根组件
│   ├── main.js       # 入口文件
│   └── permission.js # 路由权限控制
├── .env.development  # 开发环境配置（接口地址）
├── .env.production   # 生产环境配置
├── vue.config.js     # Vue 项目配置（跨域、端口、打包）
└── package.json      # 依赖、脚本配置

（3）然后再项目目录下执行如下命令安装依赖： 
npm install

6，启动项目

（1）执行如下命令可启动开发服务器。
npm run dev

（2）使用浏览器访问，默认显示登录页：

（3）登录后内页显示效果如下：

7，打包与部署

（1）开发完成后，执行如下打包命令，生成可部署的静态资源。打包完成后，项目根目录会生成 dist 文件夹，即为最终部署文件。
npm run build:prod

（2）如果想要本地预览打包结果，可以线执行如下命令安装本地服务。 
npm install -g serve

（3）然后执行如下命令启动 dist 文件夹：
serve dist

附：配置并使用真实的后端 API 地址

（1）vue-element-admin 默认启用本地 Mock 接口实现免后端调试，无论是开发环境还是生产环境都会拦截请求并返回 mock 数据。想要禁用 Mock，首先修改 src/main.js，删除/注释生产环境的 mock 代码：
// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

（2）接着修改 vue.config.js，删除/注释 devServer 的 mock 配置。 
devServer: {
  port: port,
  open: true,
  overlay: {
    warnings: false,
    errors: true,
  },
  // before: require('./mock/mock-server.js')
},

（3）最后修改 .env.development（开发环境）和 .env.production（生产环境）文件，将 base api 改成我们真实的后台地址。 
VUE_APP_BASE_API = 'http://hangge.com/api'
评论

全部评论（0）

回到顶部