# custom-components

**Repository Path**: ysace/custom-components

## Basic Information

- **Project Name**: custom-components
- **Description**: vue2+ts 项目 使用了 vue-class-component 和 vue-property-decorator
基于 element 封装的一些组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-12
- **Last Updated**: 2025-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 封装的组件

## 项目基本信息

### 搭建项目

vue2+ts 项目 使用了 vue-class-component 和 vue-property-decorator
node 版本 node: v14.21.3 npm: 6.14.18

[使用说明 vue-class-component](https://github.com/vuejs/vue-class-component)
[使用说明 vue-property-decorator](https://github.com/kaorun343/vue-property-decorator)
<img src='./src/assets/createProject.png'/>

### .prettierrc 文件配置

```json
{
  "printWidth": 120, // 一行的最大宽度为 120 个字符
  "tabWidth": 2, // tab缩进大小,默认为 2
  "singleQuote": true, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
  "useTabs": false, // 使用tab缩进，默认false
  "semi": true, // 在语句末尾添加分号, 默认true
  "trailingComma": "es5", // 控制在多行数组和对象字面量中是否打印尾随逗号, 默认none,可选 none | es5 | all(所有)
  "bracketSpacing": true, // 默认true   true: { foo: bar }  false: {foo: bar}
  "arrowParens": "avoid", // 只有一个参数的箭头函数中是否使用圆括号 默认avoid  avoid(不使用) | always(使用)
  "jsxBracketSameLine": false, // 在 JSX 中，将 > 放在最后一行的结束处，而不是新行上 默认 false
  // false: <div
  //          className=""
  //          style={{}}
  //       >
  // true: <div
  //          className=""
  //          style={{}} >
  // overrides 为不同类型的文件指定不同的代码风格
  "overrides": [
    {
      "files": ".prettierrc",
      "options": {
        "parser": "json",
        "trailingComma": "none"
      }
    },
    {
      "files": "*.json",
      "options": {
        "tabWidth": 2,
        "trailingComma": "none"
      }
    }
  ]
}
```

### .eslintrc.js 文件配置说明

```json
配置项的值 "off" | "warn" | "error" | 其他
"off"   或 0 - 关闭规则
"warn"  或 1 - 启用并视作警告（不影响代码运行）
"error" 或 2 - 启用并视作错误（触发时终止代码运行）

"no-console": 不允许使用 "console"
"no-debugger": 不允许使用 "debugger"
"no-unused-vars": 不允许存在未使用的变量、函数和函数参数
"camelcase": 强制变量、函数、属性等使用驼峰命名法
"no-explicit-any": 禁止在 ts 代码中使用 any 类型
"no-this-alias": 禁止在代码中为 this 创建别名，即将 this 赋值给其他变量

"quotes": ["error", "single", { "avoidEscape": true }],
"quotes" 用于指定字符串应该使用哪种类型的引号（单引号或双引号）
"error": 不符合该规则会报错
"single": 指定字符串应该使用单引号
"avoidEscape": true: 允许在某些情况下使用双引号，以避免转义字符的使用。例：若字符串中包含单引号，可使用双引号可以避免转义

"comma-dangle": 用于控制对象、数组和函数参数等结构的最后一个元素后是否允许有逗号。
配置值选项 "never" | "always" | "always-multiline" | "never-multiline"
"never": 不允许在最后一个元素后有逗号。
"always": 总是要求在最后一个元素后有逗号。
"always-multiline": 在多行对象、数组或函数参数中，最后一个元素后必须有逗号，但在单行结构中不需要。
"never-multiline": 在多行结构中不允许有逗号，但在单行结构中可以。
```

### git 代码提交规范

- feat: 新增功能
- fix: 修复 bug
- docs: 更新文档
- style: 主要涉及代码风格的调整，如缩进、空格、换行等，通常不会影响功能
- perf: 性能优化
- refactor: 代码重构，对已有代码进行优化和改进
- dependencies: 依赖管理
- revert: 回滚提交
- merge: 合并分支

## 组件

- 删除按钮组件
- title 组件
- 搜索组件
- 详情组件
- 操作区域组件
- 表单组件
- 封装的 form 组件
- 表格组件
- 导入 excel 组件
- 导出组件
- 图片上传组件