avue/app_web

前言

1. 简介

该web应用是基于iBiz平台提供的一套PC端前端解决方案Vue_R7【一套基于Vue全家桶（Vue + Vue-router + Vuex）的前端框架】生产而成，Vue_R7不仅适用于管理后台或管理系统开发，且广泛适用于B/S架构的项目开发。本文档主要介绍项目如何快速上手，成果物代码结构做一阐述，旨在能够为开发人员提供一定开发指导支持。而今框架开源，希望能有更多志同道合的伙伴参与Vue_R7的迭代 ^_^

2. 开发环境要求

• Node.js

• Yarn

• Vue Cli

3. 开发技术要求

掌握Vue、TypeScript、less、html等技术。

4. 技术栈

• 前端MVVM框架：vue.js 2.6.10

• 路由：vue-router 3.1.3

• 状态管理：vue-router 3.1.3

• 国际化：vue-i18n 8.15.3

• 数据交互：axios 0.19.1

• UI框架：element-ui 2.13.0, view-design 4.1.0

• 工具库：qs, path-to-regexp, rxjs

• 图标库：font-awesome 4.7.0

• 引入组件： tinymce 4.8.5

• 代码风格检测：eslint

快速上手

1. 开发环境

在安装使用 Yarn 和 Vue Cli (3.0) 前，务必确认 Node.js 已经升级到 v4.8.0 或以上，强烈建议升级至最新版本。 如果你想了解更多 Yarn 工具链的功能和命令，建议访问 Yarn 了解更多。 如果你想了解更多 Vue Cli (3.0) 工具链的功能和命令，建议访问 Vue Cli (3.0) 了解更多。

• 访问 Node.js ，根据文档安装 Node.js。
• 访问 Yarn ，根据文档安装 Yarn。
• 访问 Vue Cli (3.0) ，根据文档安装 Vue Cli (3.0)。

在安装 Vue Cli (3.0) ,请使用 Yarn 模式全局安装。

$ yarn global add @vue/cli

以下为 Windows 环境开发正常配置

2. 安装依赖

打开前端项目，进入工作空间下，执行安装依赖命令

$ yarn install

3. 启动

在工作空间下，执行启动命令

$ yarn dev-serve

启动后，通过 vue.config.js 开发服务 devServer 下配置的本地启动端口号访问开发项目。
示例:

$ http://localhost:8111

这儿需要注意一点，此时启动的项目访问的数据是我们前端的mock数据，如需与后台直接交互，请看第4点。

4. 远程代理

在工作空间下，执行启动命令

$ yarn serve

修改远程代理文件 vue.config.js 代理地址

5. 打包

在工作空间下，执行打包命令

$ yarn build

打包完成，生成最终交付产物。

成果物结构

|─ ─ app_web
​    |─ ─ public                                 public文件夹
​        |─ ─ assets                             静态文件夹
        |─ ─ favicon.ico                        图标
​    |─ ─ src                                    工程文件夹
        |─ ─ assets                             静态资源
        |─ ─ codelist                           动态代码表服务
        |─ ─ components                         基础组件，主要包含编辑器组件和其他全局使用的组件
        |─ ─ counter                            计数器服务
        |─ ─ 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 配置

如何贡献

如果你希望参与贡献，欢迎 Pull Request，或通过自助服务群给我们报告 Bug。

强烈推荐阅读 《提问的智慧》(本指南不提供此项目的实际支持服务！)、《如何向开源社区提问题》 和 《如何有效地报告 Bug》、《如何向开源项目提交无法解答的问题》，更好的问题更容易获得帮助。

社区互助

1.iBizLab论坛

2.加入钉钉 Vue_R7自助服务群（中文）