1.使用vite创建项目
1.create-vue (当前官方首选推荐)
npm create vue@latest
2.vite 创建简洁模板
pnpm create vite 选择vue+ts
3.Vue CLI (经典且稳定) 创建完整模板
npm install -g @vue/cli vue create my-project
2. JSON Schema使用
定义json数据结构
校验数据结构
生成表单
参考网站([json-schema.org/)https://j...](https://link.juejin.cn?target=https%3A%2F%2Fjson-schema.org%2F)%255Bhttps%3A%2F%2Fjson-schema.org%2F "https://json-schema.org/)%5Bhttps://json-schema.org/")
参考网站(www.npmjs.com/package/ajv...https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fajv-errors "https://www.npmjs.com/package/ajverrors)https://www.npmjs.com/package/ajv-errors")]
1.安装及使用ajv
npm install ajv 创建test-schmal文件夹，创建demo.ts文件
ts
import Ajv from "ajv"
const ajv = new Ajv() // options can be passed, e.g. {allErrors: true}
const schema = {
type: "object",
properties: {
foo: {type: "integer"},
bar: {type: "string"},
email: {type: "string", format: "email"}
},
required: ["foo"],
additionalProperties: false
}
const validate = ajv.compile(schema)
const data = {
foo: 1,
bar: "abc"
}
console.log('第一个demo开始执行了')
const valid = validate(data)
if (!valid) console.log(validate.errors)执行demo.ts文件，控制台输出如下
bash
[
{
instancePath: '/foo',
schemaPath: '#/properties/foo/type',
keyword: 'type',
params: { type: 'integer' },
message: 'must be integer'
}
]2.使用format
字段支持的类型数据
1. 使用ajv.addFormat,ajv.addKeyword配置自定义
ts
import Ajv from "ajv"
import addFormats from 'ajv-formats'
const ajv = new Ajv() // options can be passed, e.g. {allErrors: true}
addFormats(ajv)
// 自定义格式验证函数
ajv.addFormat("test-abc", (data: string) => {
return data==="abc"
})
// 自定义关键字验证函数
ajv.addKeyword({
keyword: "isFoo2",
validate: (schema, data) => {
console.log('自定义关键字2', schema, data)
return true
},
})
ajv.addKeyword({
keyword: "isFoo3",
// 编译函数，返回一个验证函数
compile: (schema, data) => {
console.log('自定义关键字3', schema, data)
return ()=>data.isFoo2
},
metaSchema: {
// 属性值所属类型
type: "string"
}
})
ajv.addKeyword({
keyword: "isFoo4",
// 返回值为插入到对应变量的属性中
macro: (schema, data) => {
console.log('自定义关键字4', schema, data)
//
return {
minLength: 16
}
},
metaSchema: {
// 属性值所属类型
type: "string"
}
})
const schema = {
type: "object",
properties: {
foo: {type: "integer"},
bar: {type: "string"},
errors: false,
test: {type: "string", format: "test-abc"},// 自定义格式验证函数必须是abc
test2: {type: "string", isFoo2: true},// 自定义关键字validate验证函数
test3: {type: "string", isFoo3: "string"},// 自定义关键字compile验证函数
test4: {type: "string", isFoo4: "string"},// 自定义关键字macro验证函数
email: {type: "string", format: "email"}
},
required: ["foo"],
additionalProperties: false
}
const validate = ajv.compile(schema)
const data = {
foo: 1,
bar: "abc",
test: "abc",
test2: "abc",
test3: "abcdefg",
test4: "abcdefg",
email: "591822202@qq.com"
}
console.log('第一个demo开始执行了')
const valid = validate(data)
if (!valid) console.log(validate.errors)3.国际化ajv-i18n
(www.npmjs.com/package/ajv...%255Bhttps%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fajv-i18n "https://www.npmjs.com/package/ajv-i18n)%5Bhttps://www.npmjs.com/package/ajv-i18n")]
4.如何转换错误语言自定义
ts
import Ajv from "ajv"
import addFormats from 'ajv-formats' // 添加内置格式验证函数
import localize from "ajv-i18n" // 添加内置本地化验证函数
const ajv = new Ajv() // options can be passed, e.g. {allErrors: true}
addFormats(ajv)
// 自定义格式验证函数
ajv.addFormat("test-abc", (data: string) => {
return data==="abc"
})
// 自定义关键字验证函数
ajv.addKeyword({
keyword: "isFoo2",
validate: (schema, data) => {
console.log('自定义关键字2', schema, data)
return true
},
})
ajv.addKeyword({
keyword: "isFoo3",
// 编译函数，返回一个验证函数
compile: (schema, data) => {
console.log('自定义关键字3', schema, data)
return ()=>data.isFoo3
},
metaSchema: {
// 属性值所属类型
type: "string"
}
})
ajv.addKeyword({
keyword: "isFoo4",
// 返回值为插入到对应变量的属性中
macro: (schema, data) => {
console.log('自定义关键字4', schema, data)
//
return {
minLength: 6
}
},
metaSchema: {
// 属性值所属类型
type: "string"
}
})
// 自定义报错信息
ajv.addKeyword({
keyword: "isFoo5",
validate: function fun(schema, data) {
console.log('自定义关键字5', schema, data)
fun.errors = [
{
instancePath: '/test5',
schemaPath: '#/properties/foo/type',
keyword: 'type',
params: { type: 'aaaa' },
message: '自定义提示错误展示'
}
]
// 自定义关键字5验证函数，返回false表示校验失败
return true
},
})
const schema = {
type: "object",
properties: {
foo: {type: "string"},
bar: {type: "string"},
errors: false,
test: {type: "string", format: "test-abc"},// 自定义格式验证函数必须是abc
test2: {type: "string", isFoo2: true},// 自定义关键字验证函数
test3: {type: "string", isFoo3: "string"},// 自定义关键字验证函数
test4: {type: "string", isFoo4: "string"},// 自定义关键字验证函数
test5: {type: "string", isFoo5: "string"},// 自定义关键字验证函数
email: {type: "string", format: "email"}
},
required: ["foo"],
additionalProperties: false
}
const validate = ajv.compile(schema)
const data = {
foo: "133",
bar: "abc",
test: "abc",
test2: "abc",
test3: "abcdefg",
test4: "abcdefg",
test5: "1234",
email: "591822202@qq.com"
}
console.log('第一个demo开始执行了')
const valid = validate(data)
// 校验失败报错
if (!valid) {
// 多语言-转换成中文报错
localize.zh(validate.errors)
console.log(validate.errors)
}5.自定义错误信息ajv-errors
自定义报错因为国际化转换导致失败