# SunRyVue
**Repository Path**: hlzd_sun/sun-ry-vue
## Basic Information
- **Project Name**: SunRyVue
- **Description**: 基于RuoYi-Vue改造升级的前端框架（仅限学习交流使用）
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-23
- **Last Updated**: 2021-06-24
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# SunRyVue
#### Description
基于Ruoyi-Vue、Ruoyi-Cloud前端脚手架融合+二次封装的（Vue.js）前端框架，支持切换Ruoyi单体/微服务后端服务
## 本地环境配置
```bash
# 安装node环境
Node.js官方网站: http://nodejs.cn 下载并安装
# 版本要求
"node": ">=8.9"
"npm": ">= 3.0.0"
# 切换npm安装源
npm install -g nrm
nrm use taobao
```
## 开发
```bash
# 克隆项目
git clone http://172.100.101.104/clzhglptcp/sun-ry-vue.git
# 进入项目目录
cd sun-ry-vue
# 安装依赖
npm install
# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 启动服务
vue-cli-service serve
```
## 配置
```bash
# 开发环境配置
.env.development
# 生产环境配置
.env.production
```
## 开发指南
```bash
## 插件使用帮助文档
# Vue.js：https://cn.vuejs.org
文档（v2）：https://cn.vuejs.org/v2/guide/
文档（v3）：https://v3.vuejs.org/guide/introduction.html
API（v2）：https://cn.vuejs.org/v2/api/
API（v3）：https://v3.vuejs.org/api/
# Element UI：https://element.eleme.cn/#/zh-CN
快速上手（使用方法）：https://element.eleme.cn/#/zh-CN/component/quickstart
# RuoYi-Vue：https://gitee.com/y_project/RuoYi-Vue
文档：http://doc.ruoyi.vip/ruoyi-vue/
# RuoYi-Cloud：https://gitee.com/y_project/RuoYi-Cloud
文档：http://doc.ruoyi.vip/ruoyi-cloud/
# axios：http://www.axios-js.com
文档：http://www.axios-js.com/zh-cn/docs/
# lodash：https://www.lodashjs.com
文档：https://www.lodashjs.com
# xe-utils：https://gitee.com/matrix_xlous/xe-utils
文档：https://xuliangzhan.com/xe-utils/index.html#/
# vxe-table：https://gitee.com/xuliangzhan_admin/vxe-table
快速上手（使用方法）：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/use
源代码（github）：https://github.com/xuliangzhan/vxe-table-demo
源代码（gitee）：https://gitee.com/xuliangzhan_admin/vxe-table
# echarts：https://echarts.apache.org/zh/index.html
教程：https://echarts.apache.org/zh/tutorial.html
配置项手册：https://echarts.apache.org/zh/option.html#title
# font-awesome：http://www.fontawesome.com.cn
文档：http://www.fontawesome.com.cn/get-started/
图标库：http://www.fontawesome.com.cn/faicons/
# animate.css：https://animate.style
文档：https://animate.style/#usage
# mockjs：http://mockjs.com
文档：https://github.com/nuysoft/Mock/wiki
示例：http://mockjs.com/examples.html
源代码（github）：https://github.com/nuysoft/Mock/tree/refactoring
# eslint：https://eslint.bootcss.com
文档：https://eslint.bootcss.com/docs/user-guide/getting-started
# prettier：https://prettier.io
文档：https://prettier.io/docs/en/index.html
# web-storage-cache：https://github.com/wuchangming/web-storage-cache
# qs：https://www.npmjs.com/package/qs
## 公用功能存放位置
# 静态资源文件：
src/assets
# 全局自定义样式：
src/assets/styles/index.scss
src/assets/styles/custom
# 静态模拟数据：
src/mock/data
# 全局插件管理：
src/plugins
# 公用方法库：
src/utils
# 业务场景：
src/views/business
# 前后端接口api：
src/utils/request.js
```
## 开发注意事项
```bash
一、排版及布局：
由于框架使用了移动端自适应解决方案，即需要保证所有横屏分辨率（16:9 或 16:10）显示效果能够等比缩放
开发时需注意以下要求：
1. 页面整体要求使用网格布局+弹性布局，参照 src/assets/styles/custom/layout.scss 样式文件
外层标签内建议使用 x-col-* x-row-* 样式（百分比栅格），定义宽高。
外层标签内建议使用 flex flex-middle flex-center，设置水平/垂直居中。
2. 所有使用px的单位的样式，只可写在以下几种场景下：
a. scss 或 css 文件中
b. 代码块中
不可以写在以下几种场景下：
a. js文件中
b. html文件标签的内联样式中，例如：