Vue+ElementUI 搭建后台管理系统(实战系列一)

简介: Vue+ElementUI 搭建后台管理系统(实战系列一)

这是我参与8月更文挑战的第1天,活动详情查看: 8月更文挑战

前言

使用ElementUI已经有一段时间了,在一边上手开发后台管理系统的同事,也记录了一些笔记,一直都没有时间将这些零零散散的笔记总结起来,整理成一个比较系统详细一点的教程,可以留着以后来看,正好在掘金上看到了关于8月更文挑战 的活动,看完我心动了,决定花一些时间和精力来参加这次的比较有意义的活动。


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

管理后台解决方案

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:浏览器打开查看效果

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

相关文章
|
JavaScript 应用服务中间件 测试技术
Vue+ElementUI 搭建后台管理系统(实战系列八)
Vue+ElementUI 搭建后台管理系统(实战系列八)
109 1
|
JSON JavaScript 前端开发
Vue+ElementUI 搭建后台管理系统(实战系列五)
Vue+ElementUI 搭建后台管理系统(实战系列五)
174 1
|
JavaScript 前端开发
Vue+ElementUI 搭建后台管理系统(实战系列三)
Vue+ElementUI 搭建后台管理系统(实战系列三)
90 0
|
JSON JavaScript 前端开发
Vue+ElementUI 搭建后台管理系统(实战系列六)
Vue+ElementUI 搭建后台管理系统(实战系列六)
122 0
|
开发框架 JavaScript 前端开发
从零到一:搭建Vue3后台管理系统
本文将在《从零到一:搭建一个Vue3开发框架》基础上搭建Vue3后台管理系统,所以如果您没有看过上篇文章或者想了解如何从零到一搭建Vue3开发框架,可以先看一下上篇文章。
|
5月前
|
开发框架 移动开发 前端开发
在微信框架模块中,基于Vue&Element前端的后台管理功能介绍
在微信框架模块中,基于Vue&Element前端的后台管理功能介绍
|
前端开发 JavaScript
Vue+ElementUI 搭建后台管理系统(实战系列七)
Vue+ElementUI 搭建后台管理系统(实战系列七)
123 1
Vue+ElementUI 搭建后台管理系统(实战系列七)
|
存储 JavaScript 前端开发
Vue+ElementUI 搭建后台管理系统(实战系列二)
Vue+ElementUI 搭建后台管理系统(实战系列二)
151 0
|
JavaScript 前端开发
vue小项目实现后台管理
vue小项目实现后台管理
106 0
|
JSON JavaScript API
Vue+ElementUI 搭建后台管理系统(实战系列四)
Vue+ElementUI 搭建后台管理系统(实战系列四)
152 0
Vue+ElementUI 搭建后台管理系统(实战系列四)

相关实验场景

更多