vue-vben-admin 解析一 vue-types 分析

最新推荐文章于 2024-09-16 07:18:28 发布

wflynn

最新推荐文章于 2024-09-16 07:18:28 发布

阅读量5.8k

点赞数 2

分类专栏： vue-vben-admin解析文章标签： vue

文章来源：原创地址

本文链接：https://blog.csdn.net/weixin_40013817/article/details/120559836

版权

vue-vben-admin解析专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文将探讨vue-vben-admin项目中vue-types的使用，通过分析代码和提供示例，展示它如何替代Vue原生类型注解，增强代码的可读性和安全性。

摘要由CSDN通过智能技术生成

vue-vben-admin 目前 vue3 的项目中技术栈包括代码都是顶尖的项目存在。
初学vue3-demo:https://github.com/Miofly/vue3-vite-vuex-demo
预览地址：https://vvbin.cn/next/#/dashboard/analysis

首先先分析下项目中的每一个 utils 的使用

propTypes.ts 的使用，对应官网 https://dwightjack.github.io/vue-types/#usage-example
这个文件主要是干什么的呢，他是一个替代 vue 原生 props 传值写法的一个库

源码分析如下

/**
 * @description: 在 TypeScript 项目中使用时，通过 .extend() 添加的验证器可能无法通过类型检查。
 *
 * 要向 TypeScript 说明您的自定义验证器，您可以使用以下模式：
 * 1. 首先创建一个模块来承载扩展的 VueTypes 对象：
 *  	VueTypesInterface： VueTypes 类定义的接口
 *  	VueTypeValidableDef： validation 对象所需的接口（interface）
 *
 * @date 2021/9/26 11:09
 * @example
 */
import { CSSProperties, VNodeChild } from 'vue';
import { createTypes, VueTypeValidableDef, VueTypesInterface } from 'vue-types';
export type VueNode = VNodeChild | JSX.Element;

/** 定义您的自定义 VueTypes 验证器接口 */
type PropTypes = VueTypesInterface & {
  /** 如果新类型将支持 `validate` 方法，使用 VueTypeValidableDef。 */
  readonly style: VueTypeValidableDef<CSSProperties>;
  readonly VNodeChild: VueTypeValidableDef<VueNode>;
  // readonly trueBool: VueTypeValidableDef<boolean>;
};

/**
 *  createTypes 它返回一个新的命名空间对象。
 *  PropTypes 类型作为类型参数传递给 propTypes 变量
 */
const propTypes = createTypes({
  func: undefined,
  bool: undefined,
  string: undefined,
  number: undefined,
  object: undefined,
  integer: undefined,
}) as PropTypes;

/**
 * @description: 可以通过 VueTypes.extend({...}) 扩展命名空间的 VueTypes 对象，如果要传递多个验证参数，将参数定义数组作为传递
 * @date 2021/9/26 10:59
 * @example
 * @param name: 必须传入.自定义类型的名称，将会暴露在 VueType.{name} 上
 * @param validate:	默认 false, 如果为 true 需要提供一个验证方法
 * @param getter:	默认 false,	如果为 ture 将被定义为访问器属性 (例如, VueTypes.string). 如果为 false,将被定义为一个方法 (例如 VueTypes.arrayOf()).
 */
propTypes.extend([
  {
    name: 'style',
    getter: true,
    type: [String, Object],
    default: undefined,
  },
  {
    name: 'VNodeChild',
    getter: true,
    type: undefined,
  },
]);

export { propTypes };

如何使用示例代码如下：

<template>
	<p>mioString:{{ mioString }}</p>
	<p>mioNumber:{{ mioNumber }}</p>
	<p>mioArray:{{ mioArray }}</p>
	<p>mioBoolean:{{ mioBoolean }}</p>
	<p>miotest:{{ miotest }}</p>
	<p>mioObject:{{ mioObject }}</p>
	<p>mioFunction:{{ mioFunction }}</p>
	<p>mioMix:{{ mioMix }}</p>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { propTypes } from '@/utils/propTypes';

export default defineComponent({
	name: 'Child',

	props: {
		mioString: propTypes.string.def('600px'),
		mioBool: propTypes.bool.isRequired,
		mioNumber: propTypes.number,
		mioInteger: propTypes.integer,
		mioObject: propTypes.object,
		mioArray: propTypes.array,
		mioFunction: propTypes.func,
	},

	setup (props, { attrs, emit, slots }) {
		console.log('props：', props);
		console.log('props.mioString：', props.mioString);
	},

});
</script>