手握Vben Admin,轻松构建企业级Vue后台管理系统!

希里安 2023-04-23

3362

关注“希里安”，get更多有用干货！

随着好的开源项目的分享，我也从中学到了很多，无论是项目技术以及开发规范。比如昨天分享中使用的的前端框架，vben admin，我觉得我后期开源项目可以用此作为自己的快速开发的前端框架，而且此框架基于最新的技术栈，有丰富的示例，github星星数也高达17.3K。

先摆出项目地址

https://github.com/vbenjs/vue-vben-admin

技术栈：vue3+ts+vite+antdesign

先预览一下，预览地址：

https://vben.vvbin.cn/#/dashboard/analysis

这是左侧导航栏，相关的功能只能说是相当的丰富：

功能丰富到你看的眼花缭乱，基本你能想到的功能它都有，是不是对它心动了，以至于官方自己说不建议在此基础上二次开发，并另外提供了一个精简版本。

今天我们就先看看精简版，后期项目如果不出意外就会在此版本上开发：

开发前准备：

node 和 git -项目开发环境
Vite - 熟悉 vite 特性
Vue3 - 熟悉 Vue 基础语法
TypeScript - 熟悉TypeScript基本语法
Es6+ - 熟悉 es6 基本语法
Vue-Router-Next - 熟悉 vue-router 基本使用
Ant-Design-Vue - ui 基本使用
Mock.js - mockjs 基本语法

精简版开发步骤：

获取项目代码
git clone https://github.com/anncwb/vue-vben-admin.git
安装依赖
cd vue-vben-admin
git checkout thin
pnpm install
运行
pnpm serve
打包
pnpm build

如果你想给这个项目贡献，按照以下提交规范：

参考 vue 规范 (Angular)
feat 增加新功能
fix 修复问题/BUG
style 代码风格相关无影响运行结果的
perf 优化/性能提升
refactor 重构
revert 撤销修改
test 测试相关
docs 文档/注释
chore 依赖更新/脚手架配置修改等
workflow 工作流改进
ci 持续集成
types 类型定义文件更改
wip 开发中

这里我们克隆仓库地址，并切换到精简版：

执行

pnpm install

执行

pnpm serve

打开web页面：

这里可以看到，精简版确实少了很多功能，还是官方想的周到，如果我们需要还可以按需引入的嘛。

那么我们再来看看项目结构如何：

真的非常赏心悦目，一看起来就很明了，这样优秀的案例值得我们学习，简单的功能真的没必要再去重复造轮子，直接用别人优秀的框架案例提升效率还能学习别人的优秀之处，我们只需要完成自己的创意和业务需求即可。

在最近的学习中，我也深深的体会到一点在这分享给大家，作为一个合格的程序员没必要太在乎用那个框架，用什么高端的技术，关键还在于基础知识要牢固以及明白自己的需求是什么，到底想要什么。因为有了稳固的基础，就能灵活运用各种框架实现自己的目的。

再说说我之前的项目cops-webpack版是基于vue+webpack+js的前端demo，只是适合入门的小白用，而且当时也没设计什么功能页面，只是为了跑通前后端用的demo，大家用来学习入门也是极好的，我这边已将源码上传仓库供大家使用，里面会包含容器化的dockefile以及k8s部署的yaml。

https://github.com/cilliandevops/cops-fe-webpack

那么今天我们就来看看我想做的项目，需要什么功能，需求首先要搞清楚，不着急开发：

目前我发现对于后台开发来说有自己的管理平台，有配置管理平台、应用资产管理平台、api管理或者有现成的devops管理平台，而对于纯运维来说还是比较缺少相应的平台，这里我不求开发一个大而全又重复造轮子的平台，我觉得我会先从个人角度，以及结合实际工作出发来去开发一块平台，后期随着自己的知识储备增长以及项目的成熟再去开发通用类平台。

我们这里还是按照前辈们总结的流程来：

、

第一步需求分析和规划

先问自己这个问题：目前我就是自己的客户，我的需求是什么，也就是说客户的痛点是什么，开发这款产品的定位是什么,如何规划自己功能模块、技术方案。

我的出发点就是利用现有的框架，学习和熟悉最新的前后端框架，并开发完成运维开发管理的部分功能。产品定位就是面向运维开发工程师这一小撮人的管理平台，目前初步打算打造为一款资产管理以及功能集成的平台。

功能模块，暂时想到的有：

传统模块：

1、终端模块（批量执行）

2、代理模块（nginx模板、修改重启生效）

3、资产管理（系统安装、部署、资产列表）

4、网络模块（路由管理）

5、认证管理（key管理、配置认证）

6、日志集成展示（详细日志用现成的elk等、只显示重要应用日志）

7、监控集成展示（只挑重要监控展示）

8、告警管理（设置整理各种webhook告警）

云原生模块：

1、Docker

2、K8s

3、网格管理框架

（这块已经有专用平台，只做一些自定义的功能）

微服务模块：

1、微服务管理控制模块（增删改查）

暂时想到这些，看似多，其实很多功能已经有前辈做好了，我这边只是引用改造一下即可。在这里还是非常感谢开源项目的前辈，让我们学到很多。

暂时可以搞成这样式的，至于后端的框架后面接着研究：

这样看起来也比较简单明了，后面接着慢慢开发。

今天的分享就到这了，感兴趣的朋友赶快去试试，别忘了点赞关注呀！

vue 后台管理系统后台技术后台产品框架

文章转载自希里安，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

手握Vben Admin,轻松构建企业级Vue后台管理系统!

评论