# vue3-json-schema-form

**Repository Path**: oheart/vue3-json-schema-form

## Basic Information

- **Project Name**: vue3-json-schema-form
- **Description**: vue3-json-schema-form
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-18
- **Last Updated**: 2024-04-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3

## README

# 代码-参考github链接
[vue3-json-schema-form](https://github.com/cwy007/vue3-json-schema-form/tree/5-8)

# vue3

安装

```
npm i -g @vue/cli
```

创建项目

```
vue create vue3-json-schema-form
```

![vue3创建项目配置](./md/imgs/1.png)

# rfcs

[vue rfcs](https://github.com/vuejs/rfcs/tree/master)

# 代码格式化工具 prettier

[prettier](https://prettier.io/)
![代码格式化工具prettier](./md/imgs/2.png)

使用

1. vscode 扩展查找 prettier 安装
   ![代码格式化工具prettier](./md/imgs/3.png)

2. 项目根目录新建.prettierrc 配置

```
    {
        "semi": false,
        "singleQuote": true,
        "arrowParens": "always",
        "trailingComma": "all",
    }
```

3. vscode 配置保存时执行 prettier
   ![vscode配置保存时执行prettier](./md/imgs/4.png)
   ![vscode配置保存时执行prettier](./md/imgs/5.png)

# eslint错误修复
```
npm run lint --fix
```

# vue3 jsx
[babel-plugin-jsx](https://github.com/vuejs/babel-plugin-jsx)
```
npm install @vue/babel-plugin-jsx -D
```

babel配置（babel.config.js）中添加
```
{
  "plugins": ["@vue/babel-plugin-jsx"]
}
```

# json schema
1. 定义json数据
2. 校验数据


链接：
- [ajv](https://ajv.js.org/)
- [github ajv](https://github.com/ajv-validator/ajv)
- [json-schema](https://json-schema.org/)
- [ajv-i18n](https://github.com/ajv-validator/ajv-i18n)
- [ajv-errors](https://github.com/ajv-validator/ajv-errors)

ajv安装
```
  npm install ajv -S
```

ajv-i18n安装
```
npm install ajv-i18n -S
```

ajv-errors安装
```
npm install ajv-errors -S
```


# 课程目标和接口定义
一. 确定组件的接口和定义  
二. 开发入口组件的实现  
三. 开发基础渲染的实现  

1. 接口，即PROPS
  - schema
  - value
  - locale
  - onChange
  - uiSchema
  - 其他...

2. API设计
![6.png](./md/imgs/6.png)
```jsx
<JsonSchemaForm 
      schema={schema}
      value={value}
      locale={locale}
      onChange={handleChange}
      uiSchema={uiSchema}
      contextRef={someRef}
  />
```
- schema  
json schema对象，用来定义数据，同时也是我们定义表单的依据

- value  
表单的数据结果，你可以从外部改变这个value,在表单被编辑的时候，会通过`onChange`透出value

  需要注意的是，因为vue使用的是可变数据，如果每次数据变化我们都去改变`value`的对象地址，那么会导致整个表单都需要重新渲染，这会导致性能降低。
  从实践中来看，我们传入的对象，在内部修改其field的值基本不会有什么副作用，所以我们会使用这种方式来进行实现。也就是说，如果`value`是一共对象，那么从`JsonSchemaForm`内部修改的值，并不会改变`value`对象本身。我们仍然会触发`onChange`, 因为可能在表单变化之后，使用者需要进行一些操作。

- onChange  
在表单值有任何变化的时候会触发该回调方法，并把新的值进行返回

- locale  
语言，使用`ajv-i18n`指定错误信息使用的语言

- contextRef  
你需要传入一共vue3的`Ref`对象，我们会在这个对象上挂载`doValidate`方法，你可以通过
```ts
const yourRef = ref({})

onMounted(() => {
  yourRef.value.doValidate()
})

<JsonSchemaForm contextRef={yourRef} />
```

- uiSchema  
对表单的展现进行一些定制，其类型如下：
```ts
export interface VueJsonSchemaConfig {
  title?: string
  description?: string
  component?: string
  additionProps?: {
    [key: string]: any
  }
  withFormItem?: boolean
  widget?: 'checkbox' | 'textarea' | 'select' | 'radio' | 'range' | string
  items?: UISchema | UISchema[]
}

export interface UISchema extends VueJsonSchemaConfig {
  properties?: {
    [property: string]: UISchema
  }
}
```

# monaco-editor
```
npm install monaco-editor -D
```

# vue-jss
[vue-jss](https://github.com/BestVue3/vue-jss)
```
npm install vue-jss -S
```

```
npm install jss jss-preset-default -S
```

# 复杂节点
1. 对象
2. 数组

# circular-dependency-plugin检查循环引用 
[circular-dependency-plugin](https://github.com/aackerman/circular-dependency-plugin) 

```
npm install circular-dependency-plugin -D
```

# 单元测试
Jest

为什么要单元测试？
1. 检测bug
2. 提升回归效率
3. 保证代码质量

vue-test-utils

覆盖率

# Jest
[jestjs](https://jestjs.io/docs/getting-started)  
vue-cli创建的项目带的测试：
@vue/test-utils  
test:unit
![](./md/imgs/7.png)
![](./md/imgs/8.png)

另一个测试
1. describe
2. it
3. test


断言 
1. toMatch
2. toBe  
...

预设和清理
1. beforeEach/afterEach
2. beforeAll/afterAll
3. 作用域

异步测试


vue中jest测试命令
```
npm run test:unit
```

单元测试的指标讲解
coverage
命令（带coverage覆盖率数据的报告）
```
npm run test:unit -- --coverage
```

![](./md/imgs/9.png)

执行coverage命令后生成结果在coverage目录，报告html目录（coverage/lcov-report/index.html）

![](./md/imgs/10.png)

跑部分单元测试（单个测试用例it的名字中带multi）
```
npm run test:unit -- -t=multi
```

# 主题系统

1. 不同于样式主题
- 交互可以变化
- 组件从产出可以完全不同
- 统一接口之后所有内容皆可自定义

[vue-cli-service-build](https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-build)

npm bun build前清空之前打包的dist目录，使用rimraf
```
npm i rimraf -D
```

npm run build命令设置process.env变量（TYPE=lib），兼容mac和windows
```
npm i cross-env -D
```