接着上一篇文章的分享来说，我们已经选了合适的前端框架，那么就需要了解其项目结构，以及对应的组件。上一篇中也提到了我们开源项目的需求，第一步项目需求确定后那么就开始我们的下一步计划。
第二步：架构的设计
怎么个架构设计，就是对技术架构、业务架构的设计。针对关键模块进行详细设计,确保系统可扩展、可维护。
技术架构设计：
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：
官网地址：
https://cn.vitejs.dev/
至于为什么使用vite，个人简单理解就一个字“快”，具体的原因参考官网为什么选vite地址：
https://cn.vitejs.dev/guide/why.html
那就开始搭建第一个vite项目：
使用 NPM:$ npm create vite@latest使用 Yarn:$ yarn create vite使用 PNPM:$ pnpm create vite
注意：
Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个Vite + Vue 项目，运行:
# npm 7+, extra double-dash is needed:npm create vite@latest my-vue-app ----template vue# yarnyarn create vite my-vue-app --template vue# pnpmpnpm create vite my-vue-app --template vue
我这边直接根据提示安装：
选择vue+ts然后直接运行即可：
cd viteappnpm installnpmrun dev
访问web页面，就可以看到一个vite+vue的项目已经创建好了。
再引入antd UI组件：
官网
https://antdv.com/components/overview-cn
1、
$ npm i --saveant-design-vue@latest
2、在main.ts中导入antd:
tsimport Antd from 'ant-design-vue'import 'ant-design-vue/dist/antd.css'createApp(App).use(Antd).mount('#app')
3、在App.vue中使用antd组件:
vue<template><a-button type="primary">Button</a-button></template><script>export default {name: 'App'}</script>
4、.配置按需导入:
在vite.config.js中添加:
jsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import Components from'unplugin-vue-components/vite'import { AntDesignVueResolver } from'unplugin-vue-components/resolvers'export default defineConfig({plugins: [vue(),Components({resolvers: [AntDesignVueResolver()]})]})
查看一下web页面，已经成功引入了，那么就开始vite+vue的开发之旅了。
然后再看Vben的项目结构以及组件：
.├── build # 打包脚本相关│ ├── config # 配置文件│ ├── generate # 生成器│ ├── script # 脚本│ └── vite # vite配置├── mock # mock文件夹├── public # 公共静态资源目录├── src # 主目录│ ├── api # 接口文件│ ├── assets # 资源文件│ │ ├── icons # icon sprite 图标文件夹│ │ ├── images # 项目存放图片的文件夹│ │ └── svg # 项目存放svg图片的文件夹│ ├── components # 公共组件│ ├── design # 样式文件│ ├── directives # 指令│ ├── enums # 枚举/常量│ ├── hooks # hook│ │ ├── component # 组件相关hook│ │ ├── core # 基础hook│ │ ├── event # 事件相关hook│ │ ├── setting # 配置相关hook│ │ └── web # web相关hook│ ├── layouts # 布局文件│ │ ├── default # 默认布局│ │ ├── iframe # iframe布局│ │ └── page # 页面布局│ ├── locales # 多语言│ ├── logics # 逻辑│ ├── main.ts # 主入口│ ├── router # 路由配置│ ├── settings # 项目配置│ │ ├── componentSetting.ts # 组件配置│ │ ├── designSetting.ts # 样式配置│ │ ├── encryptionSetting.ts # 加密配置│ │ ├── localeSetting.ts # 多语言配置│ │ ├── projectSetting.ts # 项目配置│ │ └── siteSetting.ts # 站点配置│ ├── store # 数据仓库│ ├── utils # 工具类│ └── views # 页面├── test # 测试│ └── server # 测试用到的服务│ ├── api # 测试服务器│ ├── upload # 测试上传服务器│ └── websocket # 测试ws服务器├── types # 类型文件├── vite.config.ts # vite配置文件└── windi.config.ts # windcss配置文件
地址：
http://doc.vvbin.cn/components/introduction.html#usage
这里我们根据需要引入相关组件即可，慢慢开发吧，先接着昨天的改个logo和标题吧：
在用Vben的过程中，感觉确实很多功能封装的好，但是对于小项目来说又感觉有点臃肿，所以看大家喜好吧，也可以找找其他简单的框架开始，比如字节的arco，不过是用的react，我们主要还是vue，就先试试这个框架，增删改一下，行不通再说。
好了，今天运维开发平台的架构设计中的第一小步分享到这，不积跬步无以至千里，坚持学习，收获更多。感兴趣的朋友记得点赞关注呀！
