Vue3+TS企业级组件库开发笔记

Vue3+TS企业级组件库开发

!!!第一章!!!

1、jsonShcame 可全栈通用
2、h()写法render API
3、vue3与vue2的区别。在rfcs->active-rfcs文件中查看
4、vue3 Teleport组件,模态框组件,可指定某个特定挂载节点
··············<teleport to="#myID"></teleport>
5、TypeScript 强类型语言
*任何变量都声明类型
*不到万不得已不要使用any
*给你的对象声明接口

!!!第二章!!!

1、vue3项目搭建
1.1、安装npm
1.2、安装vue cli:npm i -g @vue/cli
1.3、新建项目: vue create 项目名称 例如:vue create vue3-json-schema(安装yarn后会更快)
此时报错:vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本
1、管理员身份运行PowerShell(命令提示符,来源于Linux的命令提示符也叫Shell)2、执行:set-ExecutionPolicy RemoteSigned (签名或运行这些脚本),选择Y即可解决
2、配置项

? Please pick a preset: Manually select features
			? Check the features needed for your project: Choose Vue version, Babel, TS, CSS Pre-processors, Linter, Unit
			? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
			? Use class-style component syntax? No
			? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes   
			? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
			? Pick a linter / formatter config: Prettier
			? Pick additional lint features: Lint on save, Lint and fix on commit
			? Pick a unit testing solution: Jest
			? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
			? Save this as a preset for future projects? Yes
			? Save preset as: componentsProjectInit

2、prettier的用法

3、defineComponent类型 符合react jsx类型声明
使用鼠标hover,可查看数据定义的类型等

4、对于不希望被eslint检查的行代码可加备注 “//eslint-disable-line”
引入图片路径 使用

const img=require('./assets/logo.png') //eslint-disable-line

5、h()函数其实就是对createVNode方法的封装
---------------vue挂载原理--------------------

const imgUrl = require('./assets/logo.png') //eslint-disable-line
const App = defineComponent({
  render() {
    return h(
      "div",//类型
      {
        id: "app" //子节点,可空
      },
      [  //叶子节点,可空
        h("img", {
          alt: "Vue logo",
          src: imgUrl
        }),
        h(HelloWorld, {
          msg: "hhhh哈哈哈哈哈",
          age: 88
        })
      ]
    );
  }
});

6、setup(){return obj}, 数据初始化准备

7、ref api 可直接返回{value:XXX} vue对属性进行判断是否为ref属性,是的话直接返回value

8、computed api 需要手动return值

9、watchEffect api 监听该方法内所有被引用的变量变化执行的方法

10、JSX语法 阿里团队jsx使用在antd上
10.1安装jsx 语法:yarn add @vue/babel-plugin-jsx -D
10.2增加配置项 到.babelrc:

{
		"plugins":["@vue/babel-plugin-jsx"]
	}

!!!第三章!!!

1、JSON Schema 定义json数据格式,校验数据格式 https://ajv.js.org/

1、Ajv对象,获取schema对象,然后校验数据格式 ajv的使用
1.2、安装ajv:yarn add ajv -S
1.3、根目录建测试文件夹schema-tests ,
-------------------------------------

// Node.js require:
		const Ajv = require("ajv");
		const schema = {
			type: 'string',
			minLength: 10
		}
		const ajv = new Ajv(); // options can be passed, e.g. {allErrors: true}
		const validate = ajv.compile(schema);
		const valid = validate('hhhhhJ');
		if (!valid) console.log(validate.errors);
1.4、终端打开文件夹 cd schema-tests,文件运行 node test1.js即可校验数据结构是否符合规则

2、官网提供keywords校验规则 https://ajv.js.org/docs/json-schema.html Keywords for arrays

3、format使用只针对于,string和number类型的可使用,其他类型不适用 例如 format:‘email’
3.1、自定义format,使用addFormat(string name,string|regExp|function|obj){}例如:
------------------------------------

ajv.addFormat('testFormat', (data) => {
			return data === 'hhh'
		})
	-----------------------------------

4、定义关键字addKeyword,可以自定义schema 的关键字及校验规则。例如
-------------------------------------

ajv.addKeyword('test', {
	validate (schema, data) {
		console.log(schema, data)
		if (schema === true) {
			return true
		} else {
			return data === 'hhh1'
		}
	}
})
	------------------------------
4.1、定义关键字addKeyword compile方法,执行规则校验,返回function
4.2、定义关键字addKeyword metaSchema:定义关键字的值的校验
4.3、定义关键字addKeyword macro:每个引用该关键字的schema都可添加macro中引用的所有规则

5、定义schema错误提示信息 ,ajv-i18n安装:yarn add ajv-i18n -S
5.1、注册声明
var localize = require(‘ajv-i18n’);
5.2、在校验打印前调用 localize.zh(validate.errors) 输出效果如下

[
  {
    keyword: 'format',
    dataPath: '.name',
    schemaPath: '#/properties/name/format',
    params: { format: 'email' },
    message: '应当匹配格式 "email"'
  }
]
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页