# vue2的rup模版

**Repository Path**: rk-one/rk-vue2-rup-demo

## Basic Information

- **Project Name**: vue2的rup模版
- **Description**: vue2的rup模版
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-03-24
- **Last Updated**: 2023-07-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### ⚡ 使用说明
基于 https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin
vue-next-admin开发文档 https://lyt-top.gitee.io/vue-next-admin-doc-preview/
建议使用 cnpm，因为 yarn 有时会报错。`npm install` 安装报错的话，请使用 `cnpm install`。

> 注意：`node` 需大于 `12.xxx` 小于等于 `v16.14.0`，否则安装依赖将报错。

## 开发必看【推荐】
#### ⚡ 1、全局
> 全局挂载
**(1)直接在src\utils\util.js里面加方法，export出来，不需要再main.js注入**

#### ⚡ 2、快捷CSS类样式【重点】
> 对于一些简单的样式调整直接使用变量类名即可

- 字体大小(font{变量})： 如class="font16"表示字体大小为16px的类
- 内边距(pt{变量},pr{变量},pb{变量},pl{变量})：分别表示上右下左内边距padding
- 外边距(mt{变量},mr{变量},mb{变量},ml{变量})：分别表示上右下左外边距margin

#### ⚡ 3、方法调用
> 可以对方请求方法单独export，进行按需引入使用
> 也可以将方法默认导出，通过`this.$api['请求所在文件名']['请求名']()`调用

#### ⚡ 4、公共SCSS样式(滚动条、阴影等)
> `theme/common/mixins.scss`文件中是全局常用公共样式
> 比如滚动条样式、阴影、多行文本溢出等等

使用方法：
```scss
// 在theme/common/mixins.scss中定义
@mixin xxx($a: 1px) {

}

// 基础使用

.aaa {
  @include xxx;
}
```

#### ⚡ 5、数据字典调用
> 获取字典值列表示例

**(1)直接获取【不缓存到vuex中】**
```js
const data = await this.$getDictOptions(['resourceType', 'gender']);
this.menuTyps = data[0];
this.genderDict = data[1]
```
**(2)缓存到vuex中**
```js
// 示例
this.$store.dispatch('dictionary/getDictionary', 'resourceType').then(res => {
  console.log(res);
})
// 获取
await this.$store.dispatch('dictionary/getDictionary', 'resourceType')
```
**(3)封装el-select数据字典下拉框**
> 使用方法
> 所传属性和方法与el-select基本一致
```html
<dict-select v-model="form.keyword" dictType='political' />
```
**(4)vue使用全局混入的方式实现数据字典的快速获取，并用vuex缓存**
> 1、在vue中使用如下
```js
{
  data() {
    return {}
  },
  dicts: ['noticeStatus', 'examAuditStatus'],
  methods: {}
}

```
> 2、使用数据
`this.dicts.noticeStatus`来使用

***
> 根据字典值获取字典的中文名称
```js
this.$selectDictLabel(genderDict, '0') // '男'
```

#### ⚡ 6、主题切换的css

> 如果有内容需要在不同主题显示不同的样式，需要去theme文件夹下写入对应主题的样式

#### ⚡ 7、提示类
```js
this.$message.success('删除成功');
this.$message.error('删除失败');
this.$message.warning('提示告警');
```

#### ⚡ 8、文件命名规范【推荐】

> 页面中的子组件放在`components`文件夹下，页面中的子页面放在`childs`或`childrens`文件夹下;
> 文件夹全小写

目录结构如下：
```
src                                  源码目录
|-- api                              所有api接口
|-- assets                           静态资源，images, icons, styles等
|-- components                       公用组件
|-- config                           配置信息
|-- constants                        常量信息，项目所有Enum, 全局常量等
|-- directives                       自定义指令
|-- filters                          过滤器，全局工具
|-- datas                            模拟数据，临时存放
|-- lib                              外部引用的插件存放及修改文件
|-- mock                             模拟接口，临时存放
|-- plugins                          插件，全局使用
|-- router                           路由，统一管理
|-- store                            vuex, 统一管理
|-- themes                           自定义样式主题
|-- views                            视图目录
|   |-- role                                 role模块名
|   |-- |-- role-list.vue                    role列表页面
|   |-- |-- role-add.vue                     role新建页面
|   |-- |-- role-update.vue                  role更新页面
|   |-- |-- index.less                       role模块样式
|   |-- |-- components                       role模块通用组件文件夹
|   |-- employee                             employee模块
```
详见[阿里巴巴前端开发前端代码规范](https://developer.aliyun.com/article/850913#slide-45)

#### ⚡ 9、git commit提交规范规范【推荐】

- feat：新功能（feature）
- fix：修补 bug
- docs：文档（documentation）
- style： 格式（不影响代码运行的变动）
- refactor：重构（即不是新增功能，也不是修改 bug 的代码变动）
- perf: 性能提升（提高性能的代码改动）
- test：测试
- build：构建过程或辅助工具的变动（webpack 等）
- ci：更改 CI 配置文件和脚本
- chore：不修改 src 或测试文件的其他更改
- revert：撤退之前的 commit

#### ⚡ 10、上传组件和api的封装

**(1)直接通过api调用来上传文件**
> 方法路径： `utils/util`
> 使用方式：通过api调用的方式来进行上传文件
```js
// 在组件中使用
this.$uploadFile({
  limit: 3,
  maxSize: 1,
  fileType: ['.png', '.jpg'],
  onSuccess: function (fileList) {
    console.log(fileList);
  }
  // ... 配置属性...
});
```
**(2)基于elementui的upload组件封装上传图片组件**
> 使用`ImageUpload`组件

**(3)基于elementui的upload组件封装上传文件组件**
> 使用`FileUpload`组件

#### ⚡ 11、通过菜单管理新建动态路由
> 新增菜单的时候写法同vue-router的动态路由一样

#### ⚡ 12、公共样式
```js
class="flex"// 弹性布局
class="flex-auto"// flex: 1;
class="flex-margin"// margin: auto;
class="w50"// width: 50%;
class="w80"// width: 80%;
class="w90"// width: 90%;
class="w100"// width: 100%;
class="h100"// height: 100%;
class="h50"// height: 50%;
class="vh100" // height: 100vh;
class="max100vh" // max-height: 100vh;
class="min100vh"// min-height: 100vh;
//颜色
class="color-primary"// color:#409eff;
class="color-success"// color:#67c23a;
class="color-warning"// color:#e6a23c;
class="color-danger"// color:#F56c6c;
class="color-info"// color:#909399;
//溢出
class="overflow"// overflow: hidden;
class="one-text-overflow"// 单行溢出
class="two-text-overflow"// 2行溢出
class="three-text-overflow"// 3行溢出
class="four-text-overflow"// 4行溢出
//字体大小(12px-32px)
class="font12"//font-size:12px; (12px-32px)
//边距距离
class="mt5"// margin-top:5px; (范围：mt5-mt100)
class="mr5"// margin-right:5px; (范围：mr5-mr100) 
class="mb5"// margin-bottom:5px; (范围：mb5-mb100)
class="ml5"// margin-left:5px; (范围：ml5-ml100)
class="pt5"// padding-top:5px; (范围：pt5-pt100)
class="pr5"// padding-right:5px; (范围：pr5-pr100)
class="pb5"// padding-bottom:5px; (范围：pb5-pb100)
class="pl5"// padding-left:5px; (范围：pl5-pl100)
//宽度、高度
class="width-1"// width:1px; (范围：width-1 - width-300)
class="height-1"// width:1px; (height-1 - height-300)
//switch按钮
<el-switch class="self-el-switch" active-text="是" inactive-text="否" active-color="#409EFF" inactive-color="#DCDFE6"/>
//标题
class="common-head-title"
//阴影
@include box-shadow-black;
//滚动条样式
@include scrollBar;

//iconfont图标使用
在src\assets\iconfont\iconfont.css文件加上以下格式代码
.icon-map-site:before {
  content: "\ea00";
}

//svg图标使用
<svg-icon icon-class="404" size="10"/> //src\assets\icons\svg里面加上404.svg
```