# vue2脚手架-2023

**Repository Path**: rk-one/rk-demo-vue2023

## Basic Information

- **Project Name**: vue2脚手架-2023
- **Description**: vue2脚手架-2023
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-10-10
- **Last Updated**: 2024-07-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


#### ⚡ RUP说版本明
1.0.0.0（2023-07-2023-09）
#### ⚡ 使用说明
基于 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、打包
 ```
 npm run dev //运行
 npm run build // 打包
 npm run build:zip //打包、生成zip
 git push -u origin master //推送到远程
```

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

#### 4、数据字典调用
> 获取字典值列表示例
**(1)直接获取【不缓存到vuex中】**
```js
const data = await this.$getDictOptions(['resourceType', 'gender']);
this.menuTyps = data[0];
this.genderDict = data[1]
```
**(2)缓存到vuex中**
```js
// 获取
let data = await this.$store.dispatch('dictionary/getDictionary', 'resourceType')
```
**(3)vue使用全局混入的方式实现数据字典的快速获取，并缓存到vuex**
```js
//在vue中使用如下
{
  data() {
    return {}
  },
  dicts: ['noticeStatus', 'examAuditStatus'],
  methods: {}
}
//用数据字典
{{this.dicts.noticeStatus}}
//根据字典值获取字典的中文名称
this.$selectDictLabel(genderDict, '0') // '男'
```

#### 5、常用组件
**(1)封装el-select数据字典下拉框**
> 使用方法
> 所传属性和方法与el-select基本一致
```html
<dict-select v-model="form.keyword" dictType='political' />
```
**(2)提示类**
```js
this.$message.success('删除成功');
this.$message.error('删除失败');
this.$message.warning('提示告警');
```
**(3)直接通过api调用来上传文件**
> 方法路径： `utils/util`
> 使用方式：通过api调用的方式来进行上传文件
**(4)基于elementui的upload组件封装上传图片组件**
> 使用`ImageUpload`组件

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


#### 6、公共样式
公共SCSS样式(滚动条、阴影等)
> `theme/common/mixins.scss`文件中是全局常用公共样式
> 比如滚动条样式、阴影、多行文本溢出等等
```js
clss="font-bold"// 字体加粗
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
```

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

> 页面中的子组件放在`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.scss                       role模块样式
|   |-- |-- components                       role模块通用组件文件夹
|   |-- employee                             employee模块
```
详见[阿里巴巴前端开发前端代码规范](https://developer.aliyun.com/article/850913#slide-45)

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

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