接着上一篇文章的分享来说，我们已经选了合适的前端框架，那么就需要了解其项目结构，以及对应的组件。上一篇中也提到了我们开源项目的需求，第一步项目需求确定后那么就开始我们的下一步计划。
第二步：架构的设计
怎么个架构设计，就是对技术架构、业务架构的设计。针对关键模块进行详细设计,确保系统可扩展、可维护。
技术架构设计：
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：
官网地址：
代码语言：javascript复制https://cn.vitejs.dev/
至于为什么使用vite，个人简单理解就一个字“快”，具体的原因参考官网为什么选vite地址：
代码语言：javascript复制https://cn.vitejs.dev/guide/why.html这里比较下webpack和vite的区别：
1、vite采用原生ESM导入，可以充分利用浏览器的静态模块解析功能而webpack不支持原生ESM，需要babel解析，启动时间比较长。
2、vite只在生产环境下基于rollup打包，开发环境不需要打包，可以快速启动开发服务器，webpack不管是生产还是开发都需要打包构建。
3、vite构建的包体积小，webpack相比vite构建的包文件会更大一些。
4、vite轻量级高性能，能提升开发体验和构建性能。Webpack生态丰富性和功能集成度上处于领先位置。
所以这么一比较的话，两者都是可以根据需求灵活选择结合使用。
那就开始搭建第一个vite项目：
代码语言：javascript复制使用 NPM:
$ npm create vite@latest
使用 Yarn:
$ yarn create vite
使用 PNPM:
$ pnpm create vite注意：
Vite 需要 Node.js 版本 14.18 ，16 。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个Vite Vue 项目，运行:
代码语言：javascript复制# npm 7 , extra double-dash is needed:
npm create vite@latest my-vue-app --
--template vue
# yarn
yarn create vite my-vue-app --template vue
# pnpm
pnpm create vite my-vue-app --template vue我这边直接根据提示安装：
选择vue ts然后直接运行即可：
代码语言：javascript复制cd viteapp
npm install
npm
run dev访问web页面，就可以看到一个vite vue的项目已经创建好了。
再引入antd UI组件：
官网
代码语言：javascript复制https://antdv.com/components/overview-cn1、
代码语言：javascript复制 $ npm i --save
ant-design-vue@latest2、在main.ts中导入antd:
代码语言：javascript复制ts
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
createApp(App)
.use(Antd)
.mount('#app')3、在App.vue中使用antd组件:
代码语言：javascript复制vue
<template>
<a-button type="primary">Button</a-button>
</template>
<script>
export default {
name: 'App'
}
</script>4、.配置按需导入:
在vite.config.js中添加:
代码语言：javascript复制js
import { 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的项目结构以及组件：
代码语言：javascript复制.
├── 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配置文件地址：
代码语言：javascript复制http://doc.vvbin.cn/components/introduction.html#usage
这里我们根据需要引入相关组件即可，慢慢开发吧，先接着昨天的改个logo和标题吧：
在用Vben的过程中，感觉确实很多功能封装的好，但是对于小项目来说又感觉有点臃肿，所以看大家喜好吧，也可以找找其他简单的框架开始，比如字节的arco，不过是用的react，我们主要还是vue，就先试试这个框架，增删改一下，行不通再说。
