打造运维开发管理系统：Vue3＋Vite 构建

接着上一篇文章的分享来说，我们已经选了合适的前端框架，那么就需要了解其项目结构，以及对应的组件。上一篇中也提到了我们开源项目的需求，第一步项目需求确定后那么就开始我们的下一步计划。

第二步：架构的设计

怎么个架构设计，就是对技术架构、业务架构的设计。针对关键模块进行详细设计,确保系统可扩展、可维护。

技术架构设计：

1、开发技术栈，vue+gin的前后端分离架构

前端：vue+antd+ts+vben admin实现前端业务界面

后端:gin+gorm/ent+jwt/casbin 实现后端接口开发（根据实际情况选择）

2、数据库层，根据情况选择mysql或pg

3、api设计，根据功能定义参数，从资源管理、任务管理、告警规则、权限管理、用户管理、日志收集等

4、中间件用redis用于缓存和消息队列、kafaka用于日志收集

5、部署用docker+k8s

业务架构设计：

传统模块：终端、机器资产、网络、告警、权限、监控、任务批量执行

云原生模块：docker状态、k8s状态、基础的增删改查

微服务模块：基于go-zero开发

这里我们先创建一个vue+vite项目引入antd，这里再顺便介绍学习下vite：

官网地址：

至于为什么使用vite，个人简单理解就一个字“快”，具体的原因参考官网为什么选vite地址：

这里比较下webpack和vite的区别：

1、vite采用原生ESM导入，可以充分利用浏览器的静态模块解析功能而webpack不支持原生ESM，需要babel解析，启动时间比较长。

2、vite只在生产环境下基于rollup打包，开发环境不需要打包，可以快速启动开发服务器，webpack不管是生产还是开发都需要打包构建。

3、vite构建的包体积小，webpack相比vite构建的包文件会更大一些。

4、vite轻量级高性能，能提升开发体验和构建性能。Webpack生态丰富性和功能集成度上处于领先位置。

所以这么一比较的话，两者都是可以根据需求灵活选择结合使用。

那就开始搭建第一个vite项目：

注意：

Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个Vite + Vue 项目，运行:

我这边直接根据提示安装：

选择vue+ts然后直接运行即可：

访问web页面，就可以看到一个vite+vue的项目已经创建好了。

再引入antd UI组件：

官网

1、

2、在main.ts中导入antd:

3、在App.vue中使用antd组件:

4、.配置按需导入:

在vite.config.js中添加:

查看一下web页面，已经成功引入了，那么就开始vite+vue的开发之旅了。

然后再看Vben的项目结构以及组件：

地址：

这里我们根据需要引入相关组件即可，慢慢开发吧，先接着昨天的改个logo和标题吧：

在用Vben的过程中，感觉确实很多功能封装的好，但是对于小项目来说又感觉有点臃肿，所以看大家喜好吧，也可以找找其他简单的框架开始，比如字节的arco，不过是用的react，我们主要还是vue，就先试试这个框架，增删改一下，行不通再说。

好了，今天运维开发平台的架构设计中的第一小步分享到这，不积跬步无以至千里，坚持学习，收获更多。感兴趣的朋友记得点赞关注呀！