Vben Admin 一 (初识框架)
1、什么是Vben AdminVue-Vben-Admin 是一个后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案, 总结就是一个后台管理模板。项目开始前请仔细阅读 Vben Admin 官方文档2、涉及的技术Vue3.0、Vite、 Ant-Design-Vue、TypeScript等3、项目结构├── build # 打包脚本相关│├── config # 配置文件│├── gene
·
最近因为业务需要,接触了Vben Admin 这个后台管理板块,在上手体验了一番之后,确实感觉很强啊,从这章开始,逐步拆分整个项目,在彻底熟悉了解之后,开始根据自己的需求进行相关功能的修改。
以下是后面文章的目录,文章内容会不定时更新,每更新完一个章节会在目录更新进度,如果有任何建议或者想法和指导,欢迎大家私信或者留言,大家一起学习进步~
- 前言介绍vben admin
- 登录页
- 管理页
- 路由
- 模板
- 样式
- 组件
1、什么是Vben Admin
Vue-Vben-Admin
是一个后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案, 总结就是一个后台管理模板。
项目开始前请仔细阅读 Vben Admin 官方文档
2、涉及的技术
Vue3.0、Vite、 Ant-Design-Vue、TypeScript等
3、预览
4、基本项目结构
├── 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配置文件
更多推荐
已为社区贡献1条内容
所有评论(0)