VabUI 介绍
January 6, 2023About 2 min
VabUI 介绍
演示地址
开发配置建议
- M1 + 8G 以上配置 Mac 电脑 （强烈推荐使用 Apple Mac Studio 或 Apple MacBook Pro）
- windows11 + i7 + 16G 内存 + 固态硬盘
- 开发工具 vscode 或 webstorm（请勿使用其他工具）
- 浏览器调试工具(edge > 99.0.1150.39 或 chrome > 99.0.1150.39)
目录结构
├── .github # 自动化 ci 配置（可删除）
├── .vscode # vscode 配置（不可删除）
├── mock # 本地 mock 数据
├── node_modules # 项目依赖模块
├── library # 核心模块，请勿修改，仅限Plus2022年2月7日后版本 > v3.0.1
│ ├── chainWebpack # cli脚手架相关，请勿修改
│ ├── vuePlugins # vue全自动导入，非专业前端请勿修改
│ |── components # 所有vab组件
| | ├── VabApp # 入口页
| | ├── VabAppMain # 内页
| | ├── VabAvatar # 头像
| | ├── VabBreadcrumb # 面包屑
| | ├── VabCard # el-card封装（支持骨架屏）
| | ├── VabColorfulCard # 多彩卡片封装
| | ├── VabErrorLog # 错误日志
| | ├── VabLanguage # 国际化
| | ├── VabFold # 展开合并
| | ├── VabFullScreen # 全屏
| | ├── VabLogo # logo
| | ├── VabNav # 顶部navBar
| | ├── VabNotice # 通知
| | ├── VabRefresh # 刷新
| | ├── VabSearch # 搜索
| | ├── VabSideBar # 左侧菜单
| | ├── VabTabs # 多标签页
| | ├── VabTheme # 主题
| | ├── VabTopBar # 横向布局头部
| | ├── VabLink # 链接跳转封装
| | ├── VabLock # 锁屏
| | ├── VabMenu # 菜单封装
│ | └── VabQueryForm # 顶部查询条件布局封装
│ ├── layouts # 界面布局（不需要的主题可删除，手机端适配必须保留纵向布局）
| | ├── VabLayoutColumn # 分栏布局
| | ├── VabLayoutCommon # 常规布局
| | ├── VabLayoutComprehensive # 综合布局
| | ├── VabLayoutHorizontal # 横向布局
| | ├── VabLayoutFloat # 浮动布局
| | └── VabLayoutVertical # 纵向布局
│ │ ├── pulgin # vab必要插件
│ │ └── styles # vab主题相关
├── public
│ ├── img # pwa图标
│ ├── static # 静态资源
│ ├── favicon.ico # favicon图标
│ ├── favicon_backup.ico # 备份favicon
│ └── index.html # 入口 HTML
├── src
│ ├── api # API 服务模块
│ ├── assets # 本地静态资源
│ ├── config # 项目配置
│ │ ├── cli.config.js # vue/cli配置
│ │ ├── net.config.js # 网络配置
│ │ ├── setting.config.js # 通用配置
│ │ ├── theme.config.js # 主题配置
│ │ └── index.js # 自定义配置合并（不建议修改）
│ ├── extra # 封装的小工具
│ ├── i18n # 多语言
│ ├── icon # 存放自定义svg图标 ，仅在icon属性为isCustomSvg时才会调用svg图标，如无必要建议使用内置图标
│ ├── router # 路由配置
│ ├── store # vuex 状态管理配置
│ ├── utils # js 工具
│ ├── vab(Pro以及2022年1月前的Plus) # 核心模块
│ │ |── components # 所有vab组件
| | | ├── VabAppMain # 内页
| | | ├── VabAvatar # 头像
| | | ├── VabBreadcrumb # 面包屑
| | | ├── VabFold # 展开合并
| | | ├── VabFullScreen # 全屏
| | | ├── VabLanguage # 国际化
| | | ├── VabLogo # logo
| | | ├── VabNav # 顶部navBar
| | | ├── VabNotice # 通知
| | | ├── VabRefresh # 刷新
| | | ├── VabSearch # 搜索
| | | ├── VabSideBar # 左侧菜单
| | | ├── VabTabs # 多标签页
| | | ├── VabTheme # 主题
| | | ├── VabTopBar # 横向布局头部
| | | ├── VabLink # 链接跳转封装
| | | ├── VabMenu # 菜单封装
│ │ | └── VabQueryForm # 顶部查询条件布局封装
│ │ ├── layouts # 界面布局(不需要主题可删除)
| | | ├── VabLayoutColumn # 分栏布局
| | | ├── VabLayoutCommon # 常规布局
| | | ├── VabLayoutComprehensive # 综合布局
| | | ├── VabLayoutHorizontal # 横向布局
| | | ├── VabLayoutFloat # 浮动布局
| | | └── VabLayoutVertical # 纵向布局
│ │ ├── pulgin # vab必要插件
│ │ └── styles # vab主题相关
│ ├── views # 页面组件
│ │ ├── callback # 第三方登录回调页面
│ │ ├── index # 首页
│ │ ├── login # 登录
│ │ ├── mall # 物料市场
│ │ ├── setting # 配置
│ │ ├── register # 注册
│ │ └── vab # 组件页
│ ├── App.vue # 应用入口组件
│ ├── registerServiceWorker.js # PWA注册（支持https生产环境）
│ └── main.js # 应用入口js
├── .eslintrc.js # eslint 配置项
├── babel.config.js # babel-loader 配置
├── package.json # package.json
├── postcss.config.js # postcss 配置
├── prettier.config.js # prettier 配置
├── vab.config.js # vab 配置
└── vue.config.js # vue-cli 配置
框架
