# iBiz-Vue-Studio
**Repository Path**: ibizr7pfstdtempl/iBiz-Vue-Studio
## Basic Information
- **Project Name**: iBiz-Vue-Studio
- **Description**: 在iBiz-Vue-R7的基础上进行了界面结构的模式化定制与表现升级
- **Primary Language**: TypeScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 7
- **Forks**: 5
- **Created**: 2020-05-26
- **Last Updated**: 2024-06-24
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## 前言
### 1. 简介
iBiz_Vue_STUDIO【**基于Vue全家桶**】该模板是基于iBiz平台提供的一套PC端解决方案，iBiz_Vue_STUDIO不仅适用于管理后台或管理系统开发，且广泛适用于B/S架构的项目开发。
此模板基于[iBiz_Vue](http://demo.ibizlab.cn/ibizr7pfstdtempl/ibizvuer7)标准模板扩展了UI呈现，界面风格借鉴[vscode](https://github.com/Microsoft/vscode/)实现。
本文档主要介绍项目如何快速上手，成果物代码结构做一阐述，旨在能够为开发人员提供一定开发指导支持。而今框架开源，希望能有更多志同道合的伙伴参与iBiz_Vue_STUDIO的迭代 ^_^
### 2. 采用此模板的系统
- [iBizPMS](https://gitee.com/ibizlab/iBizPMS)
### 3. 技术栈
`Vue`、`TypeScript`、`less`、`html`
### 4. 开发环境要求
- Node.js
- Yarn
- Vue Cli
### 5. 引用组件包
- 前端框架：[vue.js](https://github.com/vuejs/vue)
- 路由：[vue-router](https://github.com/vuejs/vue-router)
- 状态管理：[vuex](https://github.com/vuejs/vuex)
- 国际化：[vue-i18n](https://github.com/kazupon/vue-i18n)
- 数据交互：[axios](https://github.com/axios/axios)
- UI框架：[element-ui](https://github.com/ElemeFE/element), [view-design](https://github.com/view-design/ViewUI)
- 工具库：
1. [qs](https://github.com/ljharb/qs) - [BSD 3](https://github.com/ljharb/qs/blob/master/LICENSE.md)
2. [path-to-regexp](https://github.com/pillarjs/path-to-regexp)
3. [rxjs](https://github.com/reactivex/rxjs) - [Apache-2.0](https://github.com/ReactiveX/rxjs/blob/master/LICENSE.txt)
4. [interactjs](https://github.com/taye/interact.js)
5. [moment](https://github.com/moment/moment)
6. [xlsx](https://github.com/SheetJS/sheetjs) - [Apache-2.0](https://github.com/ReactiveX/rxjs/blob/master/LICENSE.txt)
7. [file-saver](https://github.com/eligrey/FileSaver.js)
- 图标库：[font-awesome](https://github.com/FortAwesome/Font-Awesome/tree/v4.7.0)
- 引用组件：
1. [tinymce](https://github.com/tinymce/tinymce) - [LGPL-2.1](https://github.com/tinymce/tinymce/blob/develop/LICENSE.TXT)
2. [fullcalendar](https://github.com/fullcalendar/fullcalendar)
3. [echarts](https://github.com/apache/incubator-echarts) - [Apache-2.0](https://github.com/ReactiveX/rxjs/blob/master/LICENSE.txt)
4. [vuedraggable](https://github.com/SortableJS/Vue.Draggable)
5. [@popperjs/core](https://github.com/popperjs/popper-core)
## 快速上手
### 1. 开发环境
> 需安装 `Node.js`、`Yarn`、`Vue Cli (3.0)`。
- 访问 [Node.js](https://nodejs.org) ，根据文档安装 `Node.js`。
- 访问 [Yarn](https://yarnpkg.com) ，根据文档安装 `Yarn`。
- 访问 [Vue Cli (3.0)](https://cli.vuejs.org/) ，根据文档安装 `Vue Cli (3.0)`。
在安装 Vue Cli (3.0)，请使用 Yarn 模式全局安装。
```bash
yarn global add @vue/cli
```
### 2. 安装依赖
在项目根目录，执行安装依赖命令
```bash
yarn install
```
### 3. 本地数据开发
本地开发模式启动，采用mock数据
```bash
yarn dev-serve
```
启动端口可在 vue.config.js 配置文件中修改。
示例：devServer.port: 8080
### 4. 远程数据开发
可在 vue.config.js 中的proxy项配置代理地址
示例：devServer.proxy: "http://192.168.0.10:8080"
在项目根目录，执行启动命令
```bash
yarn serve
```
### 5. 打包
在项目根目录，执行打包命令
```bash
$ yarn build
```
## 成果物结构
```text
|─ ─ app
|─ ─ public public文件夹
|─ ─ assets 静态文件夹
|─ ─ favicon.ico 图标
|─ ─ src 工程文件夹
|─ ─ assets 静态资源
|─ ─ components 基础组件，主要包含编辑器组件和其他全局使用的组件
|─ ─ engine 引擎文件，主要封装了内置视图的内置逻辑
|─ ─ environments 环境文件
|─ ─ interface 接口文件
|─ ─ locale 多语言文件
|─ ─ mock 模拟数据
|─ ─ pages 视图文件夹
|─ ─ module 模块名称
|─ ─ XXX-view 视图文件夹
|─ ─ XXX-view-base.vue 视图基类
|─ ─ XXX-view.vue 自定义视图文件
|─ ─ XXX-view.less 自定义视图样式文件
|─ ─ main.ts 应用主函数入口
|─ ─ page-register.ts 全局视图注册
|─ ─ router.ts 路由配置文件
|─ ─ service 应用实体数据服务文件夹
|─ ─ XXX 应用实体名称
|─ ─ XXX-service-base.ts 应用实体数据服务文件
|─ ─ XXX-service.ts 自定义应用实体数据服务文件
|─ ─ YYY-logic-base.ts 应用实体数据处理逻辑文件
|─ ─ YYY-logic.ts 自定义应用实体数据处理逻辑文件
|─ ─ store 全局状态管理
|─ ─ studio-core Studio模板扩展内容
|─ ─ styles 样式文件夹
|─ ─ default.less 默认样式
|─ ─ user.less 用户自定义样式
|─ ─ theme 主题文件夹
|─ ─ uiservice 界面服务文件
|─ ─ XXX 应用实体名称
|─ ─ XXX-ui-service-base.ts 应用实体界面服务文件
|─ ─ XXX-ui-service.ts 自定义应用实体界面服务文件
|─ ─ YYY-ui-logic-base.ts 应用实体界面处理逻辑文件
|─ ─ YYY-ui-logic.ts 自定义应用实体界面处理逻辑文件
|─ ─ utils 工具类文件
|─ ─ widgets 部件文件夹
|─ ─ appde 应用实体名称
|─ ─ XXX 部件名称
|─ ─ XXX-base.vue 视图基类
|─ ─ XXX.vue 自定义部件文件
|─ ─ XXX.less 部件样式文件
|─ ─ XXX.model.ts 部件model文件
|─ ─ XXX.service.ts 部件服务文件
|─ ─ app-register.ts 公共组件全局注册
|─ ─ App.vue 入口组件
|─ ─ user-register.ts 自定义组件全局注册
|─ ─ package.json 依赖管理文件
|─ ─ vue.config.js vue cli 配置
```
## 模板特殊配置
此模板所有特殊配置[说明](https://www.yuque.com/docs/share/6c649a5e-3548-4c28-a523-8ab18821be47?#db1c89e0)。
## 更新日志
每个版本的详细更改都记录在[发行说明](./CHANGELOG.md)中。
## 如何贡献
如果你希望参与贡献，欢迎 [Pull Request]()
强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)(本指南不提供此项目的实际支持服务！)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](https://www.chiark.greenend.org.uk/~sgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。
## 社区互助
1.[iBizLab论坛](https://bbs.ibizlab.cn/)