前言
使用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:浏览器打开查看效果
到这里为止,我们就把后台管理系统在本地的环境上面跑出来了,接下来要做的,就是在这个基础上进行一些有必要的修改,结合自己的项目的功能的需求,增加或者减少一下代码,修改成为自己想要的,不过里面的组件真的很丰富,很多代码也封装的很好,可以直接拿过来就用哦。