please visit [bee-home.com](https://www.bee-hole.com/)
npm install @bee-hole/adminplease visit bee-home.com
E-commerce system with built-in AI robots
One-click deployment to your own server
No longer a SaaS model online store, deploy it to your own server, fully control the data, and won't be banned
Built-in ChatGPT artificial intelligence, supporting GPT3.5 and GPT4.0 technologies
AI intelligent SEO, optimize product descriptions, easily generate advertising copies
Only need to maintain a set of product data, AI will automatically translate into global languages
Help you quickly occupy the global market
XBuy Admin是一个基于Vue.js的电商管理系统前端项目，提供完整的电商后台管理功能。
- Vue.js
- Ant Design Vue
- Vuex
- Vue Router
- Axios
- Less
``
├── src # 源代码目录
│ ├── api # API接口目录
│ ├── assets # 静态资源文件
│ ├── components # 公共组件
│ ├── config # 配置文件
│ ├── core # 核心功能模块
│ ├── directive # Vue自定义指令
│ ├── layouts # 布局组件
│ ├── locales # 国际化语言包
│ ├── mock # 模拟数据
│ ├── router # 路由配置
│ ├── store # Vuex状态管理
│ ├── utils # 工具函数
│ ├── views # 页面视图组件
│ ├── App.vue # 根组件
│ ├── main.js # 入口文件
│ ├── permission.js # 权限控制
│ └── global.less # 全局样式
├── public # 静态公共资源
├── tests # 测试文件目录
├── config # 项目配置文件
└── package.json # 项目依赖配置文件
`
1. 系统管理
- 用户管理
- 角色权限
- 菜单管理
- 系统配置
2. 商品管理
- 商品列表
- 分类管理
- 规格管理
- 品牌管理
3. 订单管理
- 订单列表
- 订单处理
- 退换货管理
4. 仓库管理
- 库存管理
- 入库管理
- 出库管理
5. 营销管理
- 促销活动
- 优惠券管理
- 营销工具
6. 统计分析
- 销售统计
- 商品分析
- 用户分析
1. 安装依赖
`bash`
yarn install
2. 开发环境运行
`bash`
yarn serve
3. 生产环境构建
`bash`
yarn build
- 用户登录认证相关接口
- manage.js - 系统管理相关接口
- menu.js - 菜单管理接口$3
- /item/* - 商品管理相关接口
- /cangku/* - 仓库管理接口
- /procure/* - 采购管理接口$3
- /order/* - 订单管理接口
- /cart/* - 购物车相关接口
- /pay/* - 支付相关接口$3
- /config/* - 系统配置接口
- /system/* - 系统管理接口
- /tool/* - 工具类接口$3
- /alibaba/* - 阿里巴巴平台接口
- /amazon/* - 亚马逊平台接口
- /bigcommerce/* - BigCommerce平台接口
- /rakuten/* - 乐天市场接口
- /shein/* - SHEIN平台接口
- /titok/* - TikTok平台接口
- /yahoo/* - Yahoo平台接口$3
- /ai/* - AI相关功能接口
- /seo/* - SEO优化相关接口组件说明
$3
- ProLayout/* - 主布局框架组件
- GlobalHeader - 全局头部组件
- GlobalFooter - 全局底部组件
- MultiTab - 多标签页组件
- SettingDrawer - 设置抽屉组件$3
- CatList - 分类列表组件
- CatParams - 分类参数组件
- CatSelect - 分类选择组件
- GoodOne - 商品详情组件
- Sku - SKU管理组件
- mainItem - 主商品组件
- mainSku - 主SKU组件$3
- OrderRepositoryRuleModal - 订单仓库规则模态框
- orderNote - 订单备注组件
- orderSwitchWareHouse - 订单切换仓库组件
- ordersShips - 订单发货组件$3
- wareHouseInfo - 仓库信息组件
- wareHouseSelect - 仓库选择组件
- wareHouseStockLogs - 仓库库存日志组件
- warehouseCountry - 仓库国家组件
- warehousePolicy - 仓库政策组件$3
- AliPayConfig - 支付宝配置组件
- PayPal - PayPal支付组件
- h5Pay - H5支付组件
- recharge - 充值组件$3
- ai/* - AI功能组件
- aiSlug - AI URL优化组件
- aiTitle - AI标题生成组件
- aiTs - AI翻译组件$3
- Dialog.js - 对话框组件
- Ellipsis - 文本省略组件
- IconSelector - 图标选择器
- TextArea - 文本域组件
- Tree - 树形组件
- Search - 搜索组件
- SelectLang - 语言选择组件$3
- alibaba/* - 阿里巴巴相关组件
- tiktok/* - TikTok相关组件
- yahoo/* - Yahoo相关组件
- rakuten/* - 乐天市场相关组件
- ozon/* - OZON平台相关组件组件使用示例
$3
`vue
`$3
vue
:order-id="orderId"
@close="handleClose"
@success="handleSuccess"
/>
`$3
vue
:source-lang="sourceLang"
:target-lang="targetLang"
@translate="handleTranslate"
/>
`组件开发规范和最佳实践
$3
components/
└── ComponentName/
├── index.js # 组件业务逻辑和配置
├── index.less # 组件样式（可选）
├── module/ # 子模块目录（可选）
└── ComponentName.vue # 组件模板
$3
1. 业务逻辑分离
- 主要业务逻辑放在
中
- 视图模板放在 .vue 文件中
- .vue 文件通过 import add from './index.js' 导入逻辑
- 使用 export default { ...add } 继承所有配置2. 组件通信
- 使用
v-model 进行数据双向绑定
- 使用 @change 等事件进行状态通知
- 使用 ref 调用组件方法
- 使用 props 传递配置项3. 状态管理
- 组件内部状态放在
data() 中
- 使用 computed 处理派生状态
- 使用 methods 定义事件处理器
- 复杂状态考虑使用 Vuex$3
1. 阅读项目文档
- 查看 README.md 了解项目结构
- 查看相关组件的实现方式
- 了解项目的编码规范
2. 分析需求
- 确定组件的功能和范围
- 识别可复用的现有组件
- 设计组件的接口和事件
3. 开发步骤
- 创建组件目录结构
- 实现业务逻辑（index.js）
- 编写视图模板（.vue）
- 添加样式（.less）
- 编写文档和注释
4. 测试和优化
- 编写单元测试
- 进行性能优化
- 检查代码规范
- 更新组件文档
$3
1. 组件通信问题
`vue
@change="handleChange"
ref="childRef"
/>
`
javascript
// 子组件
export default {
props: ['value'],
methods: {
updateValue(newValue) {
this.$emit('input', newValue)
this.$emit('change', newValue)
}
}
}
`2. 模态框组件
javascript
// 打开模态框
this.$refs.modalRef.initRule(id)
// 处理确认
handleSave() {
this.$emit('success')
this.visible = false
}
`3. 样式隔离
vue
`$3
1. 组件加载
- 使用异步组件减小初始包体积
javascript
const AsyncComponent = () => import('./AsyncComponent.vue')
`2. 数据处理
- 使用 computed 缓存计算结果
- 合理使用 watch 监听数据变化
- 避免不必要的深层监听
3. 渲染优化
- 使用 v-show 代替 v-if（频繁切换）
- 为 v-for 添加 key
- 合理使用 keep-alive
$3
1. 组件文档
- 在组件目录添加 README.md
- 说明组件的用途和使用方法
- 列出所有 props、events 和 slots
- 提供使用示例
2. 代码注释
- 为复杂逻辑添加注释
- 使用 JSDoc 注释格式
- 说明参数类型和返回值
3. 更新记录
- 记录重要的更改
- 说明破坏性变更
- 标注版本号
开发新组件注意事项
1. 组件命名规范
- 使用 PascalCase 命名组件文件夹和组件名
- 使用 kebab-case 命名组件标签
2. 组件结构
components/
└── ComponentName/
├── index.js # 组件导出文件
├── ComponentName.vue # 组件主文件
└── style.less # 组件样式文件
3. 组件文档
- 在组件目录中添加 README.md 说明组件用途和使用方法
- 说明组件的属性(props)、事件(events)和插槽(slots)
4. 组件开发规范
- 遵循 Vue.js 官方风格指南
- 使用 TypeScript 编写组件
- 添加必要的注释和文档
- 编写单元测试
- 使用 ESLint 进行代码规范检查
- 支持国际化
- 集成了自动化测试
- 采用模块化的开发方式
更多详情请访问 bee-home.com