# bgn-pro

**Repository Path**: zdg_home/bgn_model

## Basic Information

- **Project Name**: bgn-pro
- **Description**: bgn：整理创建新项目模板
vue2.0 + element-ui 以及自定义封装-常用组件
- **Primary Language**: JavaScript
- **License**: MulanPSL-1.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-27
- **Last Updated**: 2026-04-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# bgn_model

#### 介绍
bgn_model 是一个基于 Vue 2.0 + Element UI 的后台管理系统项目模板，提供常用的业务组件封装，便于快速搭建企业级后台管理系统。

#### 软件架构

* **前端框架**: Vue 2.0
* **UI 组件库**: Element UI
* **状态管理**: Vuex
* **路由管理**: Vue Router
* **网络请求**: Axios
* **构建工具**: Vue CLI / Webpack
* **Mock 数据**: 提供本地 Mock 服务

#### 项目目录结构

```
src/
├── api/                # API 接口封装
├── assets/             # 静态资源（图片、样式、JSON数据）
├── components/         # 公共组件
│   ├── commFrame/      # 业务通用组件（表格、表单、弹窗、上传等）
│   ├── content/        # 内容相关组件（筛选、选择器等）
│   └── common/         # 通用组件
├── directive/          # 自定义指令（拖拽、波浪效果等）
├── filters/            # 过滤器
├── icons/              # SVG 图标
├── layout/             # 布局组件（侧边栏、导航栏、标签栏等）
├── mixins/             # Vue 混入
├── permission.js       # 权限控制
├── request/            # 网络请求封装
├── router/             # 路由配置
├── store/              # Vuex 状态管理
├── styles/             # 全局样式
├── utils/              # 工具函数
└── views/              # 页面视图
```

#### 组件说明

* **commFrame**: 通用业务组件
  * `cDialog.vue` - 弹窗组件
  * `cDrag.vue` - 拖拽组件
  * `cEcharts.vue` - 图表组件
  * `cPage.vue` - 页面组件
  * `cSwitch.vue` - 开关组件
  * `jzSearch.vue` - 搜索组件
  * `jzTable.vue` - 表格组件
  * `table.vue` - 表格组件
  * `form.vue` - 表单组件
  * `upload.vue` - 上传组件
  * `tree.vue` / `treeTable.vue` - 树形组件
  * `excel/` - Excel 导入导出组件
  * `onlineWord.vue` - 在线文档组件
  * `searchMult.vue` - 多条件搜索组件

* **directive**: 自定义指令
  * `el-drag-dialog` - 拖拽弹窗指令
  * `waves` - 波浪点击效果指令

#### 安装教程

1.  安装 Node.js (建议 v14.x 或更高版本)
2.  安装项目依赖：
    ```bash
    npm install
    # 或使用 yarn
    yarn install
    ```
3.  运行开发服务器：
    ```bash
    npm run dev
    ```
4.  构建生产环境：
    ```bash
    npm run build
    ```

#### 使用说明

1.  **配置环境变量**: 根据需要修改 `.env.development` 和 `.env.production` 文件
2.  **开发模式**: 运行 `npm run dev` 启动开发服务器，Mock 数据服务会自动启动
3.  **路由配置**: 在 `src/router/` 目录下配置页面路由
4.  **API 接口**: 在 `src/api/` 目录下封装接口方法
5.  **状态管理**: 在 `src/store/modules/` 目录下管理状态

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request

#### 许可证

本项目基于 LICENSE 文件中的许可证进行授权。