Skip to content

iBiz-Vue-Mob-R7-Res
iBiz-Vue-Mob-R7-Res
提交 a738126f 编写于 作者: KK's avatar KK
浏览文件
操作

文档

上级 013aa344
隐藏空白字符变更
内嵌 并排
正在显示 包含 264 行增加 和 14 行删除
README.md
浏览文件 @ a738126f
需要用到axios[^9.19.2]、dingtalk-jsapi[^2.9.14]、qs[^6.9.1]、typescript[^3.8.3]、rxjs[^6.5.2]</br>
需要用到webpack的import()动态加载模块。</br>
在babel.config.js中配置"retainLines": true，以便更加准确的再async中打断点;
```
module.exports = {
env: {
development: {
sourceMaps: true,
retainLines: true
}
},
presets: [
'@vue/cli-plugin-babel/preset'
]
# Vue_Mobile_R7
Vue_Mobile_R7 是【**一套基于Vue全家桶（Vue + Vue-router + Vuex）前端框架**】的跨平台解决方案，支持一次开发，发布到 Android、iOS、H5、钉钉、微信等多个平台中使用。
本文档主要介绍项目如何快速上手，成果物代码结构做一阐述，旨在能够为开发人员提供一定开发指导支持。而今框架开源，希望能有更多志同道合的伙伴参与 Vue_Mobile_R7 的迭代 `^_^`。
## 开发环境要求
- Node.js
- Yarn
- Vue Cli
## 开发技术要求
掌握`Vue`、`TypeScript`、`less`、`html`等技术。
## 技术栈
- 前端MVVM框架：`vue.js ^2.6.11 `
- 路由：`vue-router ^3.1.5`
- 状态管理：`vuex ^3.1.2`
- 国际化：`vue-i18n ^8.15.5`
- 数据交互：`axios ^0.19.2`
- UI框架：`@ionic/core ^5.0.5`, `vant ^2.5.4`
- 工具库：`qs ^6.9.1`, `path-to-regexp ^6.1.0`, `rxjs ^6.5.4`,`moment ^2.24.0`,`async-validator^3.3.0`
- 图标库：`font-awesome 4.7.0`, `ionicons ^5.0.1`
- 引入组件： `echarts ^4.6.0`，`ibiz-mobile-components`
- 代码风格检测：`tslint`
# 快速上手
### 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
```
### 2. 安装依赖
打开前端项目，进入工作空间下，执行安装依赖命令
```bash
$ yarn install
```
### 3. 远程代理
修改远程代理文件 vue.config.js 代理地址![daili](.\public\assets\images\daili.png)
注释掉main.ts文件中的 mock数据服务![mock](.\public\assets\images\mock.png)
#
### 4. 启动
通过 vue.config.js 开发服务 devServer 下配置的本地启动端口号访问开发项目。<br>
示例:
```bash
$ http://localhost:8111
```
在工作空间下，执行启动命令
```bash
$ yarn serve
```
这儿需要注意一点，此时启动的项目访问的数据是我们前端的 mock 数据，如需与后台直接交互，请看第3点。
# 编译及打包
### 1.Web App 编译
在工作空间下，执行命令，进行生产编译。
```bash
$ yarn build
```
编译完成，生成最终交付产物，交付产物文件目录配置文件 .env.production 内容如下如下：
```sh
NODE_ENV=production
VUE_APP_CURRENTMODE='production'
outputDir='****'
```
### 2.Android 打包
Vue_Mobile_R7 解决方案使用 capacitor 作为混合开发工具。 Capacitor 提供调用原生开发，打包等功能。修改刚才目录下 `capacitor.config.json` 服务端地址，再 url 中设置服务器地址以及端口号，修改参数如下：
```json
{
********
"server": {
"url": "#########"
},
*********
}
```
混合打包配置文件内容如下：
```
NODE_ENV=production
VUE_APP_CURRENTMODE=hybridapp
VUE_APP_OUTPUTDIR=www
VUE_APP_PROXY=#########
```
修改配置文件 .env.hybridapp 下 VUE_APP_PROXY 参数值，编译前端工程：
```sh
$ yarn build-hybrid-app
```
拷贝编译成果到 andorid 工程目录下：
```bash
$ yarn cap copy
```
更新 android 打包依赖插件
```bash
$ yarn cap update
```
打开 Android Studio，执行打包
```bash
$ yarn cap open android
```
# 成果物结构
```
app 应用名称
├── public 应用公共资源目录（图片，json 文件等）
├── src 工程文件目录
│ ├── app-core 应用核心包目录
│ │ ├── code-list 应用代码表目录
│ │ │ ├── ****.ts **** 代码表
│ │ ├── counter 应用计数器目录
│ │ │ ├── **** **** 计数器目录
│ │ │ │ ├── ****-counter-base.ts **** 计数器基类
│ │ │ │ └── ****-counter.ts **** 计数器自定义文件
│ │ │ └── counter-service-constructor.ts 计数器服务构造器
│ │ ├── ctrl-model 部件模型目录
│ │ │ ├── app 应用部件模型目录
│ │ │ │ ├── ****-model.ts **** 部件模型
│ │ │ ├── **** **** 应用实体部件目录
│ │ │ │ ├── ****-model.ts **** 部件模型
│ │ ├── ctrl-service 部件服务目录
│ │ │ ├── app 应用部件服务目录
│ │ │ │ ├── ****-service.ts **** 部件服务
│ │ │ ├── **** **** 应用实体部件目录
│ │ │ │ ├── ****-service.ts **** 部件服务
│ │ └── service 服务目录
│ │ ├── app 应用服务目录
│ │ │ └── code-list-service.ts 应用代码表服务
│ │ ├── **** 应用实体 **** 服务目录
│ │ │ ├── ****-service-base.ts 应用实体 **** 基类
│ │ │ └── ****-service.ts 应用实体 **** 自定义文件
│ │ └── app-entity-service-constructor.ts 应用服务构造器
│ ├── components 应用基础组件
│ ├── engine 应用引擎
│ ├── environments 应用环境变量
│ ├── global-ui-service 应用全局行为服务目录
│ │ ├── global-ui-service-base.ts 应用全局行为服务基类
│ │ ├── global-ui-service-constructor.ts 应用全局行为服务构造器
│ │ └── global-ui-service.ts 应用全局行为服务自定义文件
│ ├── ibiz-core 埃毕致应用核心包目录
│ │ ├── app-service 应用服务
│ │ ├── code-list 代码表目录
│ │ │ └── code-list-base.ts 代码表公共逻辑
│ │ ├── control-service 部件服务目录
│ │ │ ├── ****-service-base.ts **** 部件服务公共逻辑
│ │ ├── counter 计数器服务目录
│ │ │ └── counter-service-base.ts 计数器服务公共逻辑
│ │ ├── service 应用实体服务逻辑与本地数据库逻辑
│ │ ├── third-party-service 第三方集成服务
│ │ ├── ui-service 行为服务目录
│ │ │ └── ui-logic-base.ts 行为逻辑公共基类
│ │ ├── utils 工具包
│ │ ├── wf-ui-service 工作流行为服务目录
│ │ │ └── wf-ui-action-base.ts 工作流行为服务基类
│ ├── interface 接口
│ ├── locale 多语言
│ ├── mock 模拟数据
│ ├── model 预置模型目录
│ │ ├── form-detail 表单模型
│ │ └── panel-detail 面板模型
│ ├── pages 视图
│ │ └── **** 应用模块 **** 目录
│ │ └── ****-view **** 应用视图目录
│ │ ├── ****-view-base.vue **** 应用视图基类
│ │ ├── ****-view.less **** 应用视图样式
│ │ └── ****-view.vue **** 应用视图自定义
│ ├── store 状态管理
│ ├── styles 样式
│ ├── ui-service 应用行为服务目录
│ │ └── **** **** 应用实体
│ │ ├── ****-ui-action-base.ts **** 应用实体行为基类
│ │ └── ****-ui-action.ts **** 应用实体行为自定义文件
│ ├── utils 工具包
│ ├── widgets 应用部件目录
│ │ ├── app 非应用实体部件目录
│ │ │ └── **** **** 应用部件目录
│ │ │ ├── ****-base.vue **** 应用部件基类
│ │ │ ├── ****.less **** 应用部件样式
│ │ │ └── ****.vue **** 应用部件自定义文件
│ │ └── **** **** 应用实体目录
│ │ └── **** **** 应用部件目录
│ │ ├── ****-base.vue **** 应用部件基类
│ │ ├── ****.less **** 应用部件样式
│ │ └── ****.vue **** 应用部件自定义文件
│ ├── app-initialize.ts 应用初始化文件
│ ├── app-register.ts 应用组件注册
│ ├── App.vue 入口
│ └── user-register.ts 用户自定义组件注册
├── .browserslistrc 浏览器支持
├── package.json 依赖包文件
├── tsconfig.json typescript 配置
├── tslint.json typescript 代码检测配置
├── vue.config.js vue cli 配置
└── yarn.lock 依赖包版本锁定
```
# 更新日志
每个版本的详细更改都记录在[发行说明](CHANGELOG.md)中。
# 如何贡献
如果你希望参与贡献，欢迎 [Pull Request](<http://demo.ibizlab.cn/ibiz_r7/vue_r7/issues/new>)，或通过自助服务群给我们报告 Bug。
强烈推荐阅读 [《提问的智慧》](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/)
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或