## 前言 ### 1. 简介 该应用是基于 iBiz 平台提供的一套移动端前端解决方案 Vue_Mobile_R7【**一套基于Vue全家桶(Vue + Vue-router + Vuex)的前端框架**】生产而成,Vue_Mobile_R7 不仅适用于管理后台或管理系统开发,且广泛适用于B/S架构的项目开发。本文档主要介绍项目如何快速上手,成果物代码结构做一阐述,旨在能够为开发人员提供一定开发指导支持。而今框架开源,希望能有更多志同道合的伙伴参与 Vue_Mobile_R7 的迭代 `^_^` ### 2. 开发环境要求 - Node.js - Yarn - Vue Cli ### 3. 开发技术要求 掌握`Vue`、`TypeScript`、`less`、`html`等技术。 ### 4. 技术栈 - 前端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` - 图标库:`font-awesome 4.7.0`, `ionicons ^5.0.1` - 引入组件: `echarts ^4.6.0` - 代码风格检测:`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 ``` 以下为 Windows 环境开发正常配置 <br> <br> ![开发环境信息](./imgs/getting-started/development.png) ### 2. 安装依赖 打开前端项目,进入工作空间下,执行安装依赖命令 ```bash $ yarn install ``` ### 3. 启动 在工作空间下,执行启动命令 ```bash $ yarn dev-serve ``` 启动后,通过 vue.config.js 开发服务 devServer 下配置的本地启动端口号访问开发项目。<br> 示例: ```bash $ http://localhost:8111 ``` 这儿需要注意一点,此时启动的项目访问的数据是我们前端的 mock 数据,如需与后台直接交互,请看第4点。 ### 4. 远程代理 在工作空间下,执行启动命令 ```bash $ yarn serve ``` 修改远程代理文件 vue.config.js 代理地址 ![远程代理地址](./imgs/getting-started/proxy.png) ## 编译及打包 ### 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/) 2.加入钉钉 Vue_R7自助服务群(中文) <img src="./imgs/getting-started/vue-r7-group.png" height="400" width="400">