Skip to content

VUE_R7_iBizEAM
VUE_R7_iBizEAM
提交 a828349a 编写于 作者: lab_gzf's avatar lab_gzf
浏览文件
操作

更新 README.md

上级 368e3f90
隐藏空白字符变更
内嵌 并排
正在显示 包含 140 行增加 和 34 行删除
README.md
浏览文件 @ a828349a
......@@ -2,68 +2,174 @@
### 1. 简介
Vue_R7是iBiz平台提供的一套PC端前端解决方案（以下简称前端模板），基于消费iBiz模型进行开发扩展。本文档主要介绍该前端模板的主要体系、成果物结构及代码扩展做一阐述，旨在能够为开发人员提供一定开发指导支持。
该web应用是基于iBiz平台提供的一套PC端前端解决方案Vue_R7【**一套基于Vue全家桶（Vue + Vue-router + Vuex）的前端框架**】生产而成，Vue_R7不仅适用于管理后台或管理系统开发，且广泛适用于B/S架构的项目开发。本文档主要介绍项目如何快速上手，成果物代码结构做一阐述，旨在能够为开发人员提供一定开发指导支持。而今框架开源，希望能有更多志同道合的伙伴参与Vue_R7的迭代 ^_^
### 2. 特性
### 2. 开发环境要求
-标准Restful设计
1.Vue-R7的视图路径，遵从Restful标准路径，如：
- Node.js
1)打开客户编辑界面：/index/null/customers/1/editview
- Yarn
2)打开客户关联订单表格界/index/null/customers/1/order/null/gridview?name=zhangsan;age=24
- Vue Cli
3)打开订单编辑界面：/index/null/customers/1/order/2/editview
### 3. 开发技术要求
2.基于 Restful 接口标准前后端交互，前端和后端人员更加专注于各自开发。
掌握`Vue`、`TypeScript`、`less`、`html`等技术。
-业务逻辑与界面表现分离
分离与后台交互的逻辑服务能力，UI 表现依旧使用常规 vue 模式，实现界面表现与逻辑服务的分离。
### 4. 技术栈
-快速介入的代码能力
Vue-R7提供了快速介入的代码能力，从影响范围可划分为：模板样式，插件，代码重写。视图、部件、服务都提供了继承机制，根据业务场景重写即可。
- 前端MVVM框架：vue.js 2.6.10
### 3. 开发环境要求
- 路由：vue-router 3.1.3
- Node.js
- 状态管理：vue-router 3.1.3
- Yarn
- 国际化：vue-i18n 8.15.3
- Vue Cli
- 数据交互：axios 0.19.1
### 4. 开发技术要求
- UI框架：element-ui 2.13.0, view-design 4.1.0
掌握`Vue`、`TypeScript`、`less`、`html`等技术。
- 工具库：qs, path-to-regexp, rxjs
- 图标库：font-awesome 4.7.0
- 引入组件： tinymce 4.8.5
- 代码风格检测：eslint
## 快速上手
### 1. 开发环境
> 在安装使用 `Yarn` 和 `Vue Cli (3.0)` 前，务必确认 [Node.js](https://nodejs.org) 已经升级到 v4.8.0 或以上，强烈建议升级至最新版本。
> 如果你想了解更多 `Yarn` 工具链的功能和命令，建议访问 [Yarn](https://yarnpkg.com) 了解更多。
> 如果你想了解更多 `Vue Cli (3.0)` 工具链的功能和命令，建议访问 [Vue Cli (3.0)](https://cli.vuejs.org/) 了解更多。
- 访问 [Node.js](https://nodejs.org) ，根据文档安装 `Node.js`。
- 访问 [Yarn](https://yarnpkg.com) ，根据文档安装 `Yarn`。
- 访问 [Vue Cli (3.0)](https://cli.vuejs.org/) ，根据文档安装 `Vue Cli (3.0)`。
<blockquote style="border-color: red;"><p>在安装 Vue Cli (3.0) ,请使用 Yarn 模式全局安装。</p></blockquote>
```bash
$ yarn global add @vue/cli
```
以下为 Windows 环境开发正常配置
<br>
<br>
![输入图片说明](https://images.gitee.com/uploads/images/2020/0520/130613_8338853a_7580957.png "development.png")
### 2. 安装依赖
打开前端项目，进入工作空间下，执行安装依赖命令
### 5. 技术栈
```bash
$ yarn install
```
-vue.js
### 3. 启动
-element-ui
在工作空间下，执行启动命令
-iView
```bash
$ yarn dev-serve
```
-vue-router路由
启动后，通过 vue.config.js 开发服务 devServer 下配置的本地启动端口号访问开发项目。<br>
示例:
-vuex状态管理
```bash
$ http://localhost:8111
```
这儿需要注意一点，此时启动的项目访问的数据是我们前端的mock数据，如需与后台直接交互，请看第4点。
-vue-i18n国际化
### 4. 远程代理
-axioshttp库
在工作空间下，执行启动命令
-rxjs响应式编程库
```bash
$ yarn serve
```
修改远程代理文件 vue.config.js 代理地址
### 5. 链接
![输入图片说明](https://images.gitee.com/uploads/images/2020/0520/130846_bd5a7334_7580957.png "proxy.png")
[-Vue](https://vuejs.org/index.html)
### 5. 打包
[-Vue Cli](https://cli.vuejs.org/)
在工作空间下，执行打包命令
[-TypeScript](https://www.typescriptlang.org/)
```bash
$ yarn build
```
[-Node.js](https://nodejs.org/en/)
打包完成，生成最终交付产物。
[-Yarn](https://yarnpkg.com/)
## 成果物结构
[-FreeMarker](https://freemarker.apache.org/)
\ No newline at end of file
```
|─ ─ app_EAMXXX
|─ ─ public public文件夹
|─ ─ assets 静态文件夹
|─ ─ favicon.ico 图标
|─ ─ src 工程文件夹
|─ ─ assets 静态资源
|─ ─ codelist 动态代码表服务
|─ ─ components 基础组件，主要包含编辑器组件和其他全局使用的组件
|─ ─ counter 计数器服务
|─ ─ crm-core 核心包
|─ ─ 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 全局状态管理
|─ ─ 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 工具类文件
|─ ─ utilservice 应用功能服务
|─ ─ 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 配置
```
## 社区互助
1.[iBizLab论坛](https://bbs.ibizlab.cn/)
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或