Vue+ElementUI 搭建后台管理系统（实战系列一）

前言

使用ElementUI已经有一段时间了，在一边上手开发后台管理系统的同事，也记录了一些笔记，一直都没有时间将这些零零散散的笔记总结起来，整理成一个比较系统详细一点的教程，可以留着以后来看。

关于开发过程中，确实使用到很大一部分的文档，都说前端开发离不开文档，重要的话说三遍，一定要多看文档。

管理后台解决方案

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。

Star指数：69.7k Github 地址：https://github.com/PanJiaChen/vue-element-admin Demo体验：https://panjiachen.github.io/vue-element-admin/#/dashboard 官方文档：https://panjiachen.github.io/vue-element-admin-site/zh/

使用建议 本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。

推荐使用，简化版

使用一下饿了么简化版后台管理系统-eladmin-web Github地址：https://github.com/elunez/eladmin-web

Vue+ElementUI 搭建后台管理系统（实战系列一）- 搭建开发环境

我现在手里开发的项目就是使用到了这个，操作起来还是比较方便的哦。而且安装步骤都是一样的，唯一的不同，就是对vue-element-admin管理后台进行了一些模块组件的删除，显得不那么重了，轻便了 很多，有利于日常的开发操作。

使用起来也很简单，步骤如下

1：打开github地址，下载项目

2：下载完成之后开始解压，解压完成，将项目导入到vscode里面

3：打开vscode编辑器，打开终端，进入到项目目录底下，安装依赖

安装依赖

cnpm install

4:启动服务

npm run dev

5：浏览器打开查看效果

到这里为止，我们就把后台管理系统在本地的环境上面跑出来了，接下来要做的，就是在这个基础上进行一些有必要的修改，结合自己的项目的功能的需求，增加或者减少一下代码，修改成为自己想要的，不过里面的组件真的很丰富，很多代码也封装的很好，可以直接拿过来就用哦。