基于vue的后台管理系统开发
如果要快速开发一套基于vue的后台管理系统,你可以手动从0到1动手撸,也可以基于现有的vue的后台管理系统模版进行开发。 github上有几套关注度比较的vue后台管理系统模版[1]:
- vue-element-admin[2]
- vue-admin[3]
- vue-manage-system[4]
- iview-admin[5]
- vuestic-admin[6]
- d2-admin[7]
经过比较,博主选了vue-manage-system这套后台管理系统模版进行开发。登录和首页效果图如下图所示:
本博客将重点介绍这套模版的使用,博客的提纲如下:
1. 准备工作
1.1 下载后台代码模版
打开代码模版的git地址项目地址:https://github.com/lin-xin/vue-manage-system,在终端输入以下指令,clone代码到本地。
git clone https://github.com/lin-xin/vue-manage-system.git
1.2 运行模版代码
cd 到vue-manage-system目录,在终端输入以下指令,安装依赖:
npm install
等待依赖安装完成之后,在终端输入以下指令,运行代码:
npm run dev
在浏览器输入:http://localhost:3000/,点击登录按钮,即可进入首页。
2. 模版代码介绍
2.1 技术选型
该模版基于 Vue3,使用 vue-cli3 脚手架,引用 Element Plus 组件库,方便开发快速简洁好看的组件。分离颜色样式,支持手动切换主题色,而且很方便使用自定义主题色。其他库归纳如下:
- vue:vue3;
- axios:网络库;
- element-plus:Vue3.0的组件库,提供了配套设计资源;
- vue-router:路由库;
- Element-UI:Vue 2.0 作为基础框架实现的组件库;
- vue-cropperjs:图片剪辑库;
- vue-schart:小型简单的图表库;
- vuex:状态管理;
- wangeditor:轻量富文本库。
2.2 代码结构介绍
3. 功能设计
3.1 清理工作
用IDE打开模版代码,进行清理工作,主要有以下工作:
- 代码优化:删除没有用的.vue、css、js等代码;
- 依赖库优化:删除没用的依赖库;
- 资源优化:删除没用的或替换资源,包括图片、字符串等。
3.2 功能设计
根据具体需求设计后台管理系统功能,在对应的文件夹下创建Vue页面文件、添加或修改路由状态、保存状态到store(例如登录状态、用户信息等),从store中去读保存的信息。
3.3 打包部署
3.3.1 打包脚本
先安装两个库:
A. rimraf:作用是每次打包前,先将原dist下面的文件和文件夹删掉。
B. cross-env:作用是设置及使用环境变量“ENV”。
. 在根据目录下创建文件夹config,在创建config.js,config.js代码如下:
let env = process.env.NODE_ENV || 'development'console.log(env)debuggerconst config = {development: {baseUrl: 'http://localhost:8080'},prod: {baseUrl: 'http://xxx.cn/xxxxx'}
}
export default config[env]
. 将根目录下的package.json下的scripts的指令修改如下:
"dev": "vite",
"serve": "vite preview",
"build:test": "rimraf dist && cross-env NODE_ENV=development vite preview",
"build:prod": "rimraf dist && cross-env NODE_ENV=prod vite build"
3.3.2 打包
. 测试包:
npm run build:test
. 生产包:
npm run build:prod
3.3.3 部署
经过上述步骤之后打包得到dist包,你可以选择两种方式进行部署:
1)直接 dist包部署;
2)镜像部署:参考博主的博客《阿里云Docker部署Vue应用实践指南》
4.Demo代码
代码已上传git,需要的小伙伴可以直接下载,git下载地址。
5.参考文献
1)基于VUE的后台管理系统
2) https://github.com/PanJiaChen/vue-element-admin
3) https://github.com/taylorchen709/vue-admin
4)lin-xin/vue-manage-system
5)https://github.com/iview/iview-admin
6)https://github.com/epicmaxco/vuestic-admin
7)https://gitee.com/d2-projects/d2-admin
基于vue的后台管理系统开发相关推荐
- 基于adminlte的后台管理系统开发
前言 现在的大前端技术来势凶猛,Vue&React&Angular三足鼎立.如果为了开发一个内部使用的管理系统需要去学习Node&Webpack等各种新概念,况且我们的系统并没 ...
- 基于VUE的后台管理系统
一.vue-element-admin github地址: https://github.com/PanJiaChen/vue-element-admin 文档地址:https://panjiache ...
- 基于vue.js后台管理系统框架学习
1.https://github.com/jerry9022/LitAdmin 2.http://www.cnblogs.com/dmcl/p/6722315.html 3.https://www.c ...
- Vue 2.x 实战之后台管理系统开发(二)
1. 导语 承接上文:Vue 2.x 实战之后台管理系统开发(一) 在上一篇文章中,我详细叙述了如何创建项目框架和引入各种后台常用插件,做好这些准备工作后,我们就可以着手进行页面的开发了.在开发过程中 ...
- SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客(十)
系列文章目录 系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
- SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客(十八)
系列文章目录 系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
- SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客(二十三)
系列文章目录 系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
- SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客(七)
系列文章目录 系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
- 计算机毕业设计之java+springboot基于vue的人事管理系统-员工管理系统
计算机毕业设计之java+springboot基于vue的人事管理系统-员工管理系统 项目介绍 系统权限按管理员和员工这两类涉及用户划分. (a)管理员:管理员使用本系统涉到的功能主要有:首页,个人中 ...
- 基于JAVA物业后台管理系统计算机毕业设计源码+系统+mysql数据库+lw文档+部署
基于JAVA物业后台管理系统计算机毕业设计源码+系统+mysql数据库+lw文档+部署 基于JAVA物业后台管理系统计算机毕业设计源码+系统+mysql数据库+lw文档+部署 本源码技术栈: 项目架构 ...
最新文章
- “榕树下·那年”移动app ( hybrid ) 开发总结
- python工资津贴的计算和排序-python sort、sorted高级排序技巧
- java填写xls模板_Java 新建excle文件并填充模版内容
- Java中创建数组的几种方法
- 13.5.SolrCloud集群使用手册之数据导入
- 损失函数_SRGAN损失函数(目标函数)详解
- Python实现对nginx日志access.log统计
- catia圆管焊接焊接_CATIA焊接设计实例教程
- ZEMAX知识点:坐标间断面(coordinate break)
- Linux系统下安装matla版libsvm
- RNN中的Teacher Forcing
- navicat执行sql文件报错:1840-@@GLOBAL.GTID_PURGED can only be set when @@GLOBAL.GTID_EXECUTED is empty.
- 掌握这些核心算法,拿不到10+个offer你来找我,我锤飞你个不争气的
- 如何搭建用户生命周期模型
- 战地4网页怎么换服务器地址,战地4设置服务器地址
- java lock park_java并发编程-LockSupport中park与unpark基本使用与原理简单分析
- Dinal爱磕盐--QFN封装的焊接
- 计算机专业毕业论文答辩ppt内容,计算机毕业论文答辩PPT(完整版)
- 个体户们,再辛苦也要过来看看要交哪些税?怎么享受优惠?
- [线程池][完整实现] 转:线程池原理及创建(C++实现)
热门文章
- 《SuperMap iDesktop的理论知识》
- 数据分析之 AB测试(AB Test)
- 灵飞经 ①洪武天下 第二章 紫禁深深
- “繁盛计划”,纾困中国餐饮难题背后的美团式解法
- elasticsearch报错:exceeds the [index.highlight.max_analyzed_offset] limit [1000000]
- 计算机常见的三种拓扑结构,局域网拓扑结构(常见三种)
- 如何快速翻译医学类英文专业文献?
- Milk-Tea解析工具(DJ音乐解析)
- Codeforces 592 A. PawnChess 【Codeforces Round #328 (Div. 2)】
- 为什么有了哈希算法还需要一致性哈希?