Skip to content
项目
群组
代码片段
帮助
正在加载...
帮助
提交反馈
为 GitLab 提交贡献
登录
切换导航
群组说明_配置手册
项目
项目
详情
动态
版本
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
计划
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
统计图
创建新议题
作业
提交
议题看板
打开侧边栏
iBizPOC_20001
群组说明_配置手册
提交
ddbc1e31
提交
ddbc1e31
编写于
3月 08, 2020
作者:
demoadmin
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
添加 README.md
上级
7af43fc3
变更
1
隐藏空白字符变更
内嵌
并排
正在显示
1 个修改的文件
包含
184 行增加
和
0 行删除
+184
-0
README.md
README.md
+184
-0
未找到文件。
README.md
0 → 100644
浏览文件 @
ddbc1e31
## 前言
### 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](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
)
### 5. 打包
在工作空间下,执行打包命令
```
bash
$
yarn build
```
打包完成,生成最终交付产物。
## 成果物结构
```
|─ ─ 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 全局状态管理
|─ ─ 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 配置
```
## 更新日志
每个版本的详细更改都记录在
[
发行说明
](
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"
>
编辑
预览
Markdown
格式
0%
请重试
or
添加新附件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
先完成此消息的编辑!
取消
想要评论请
注册
或
登录