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"'
  }
]