vue3+typescript+element plus使用日记01

107 阅读1分钟

element ui 中文化

1.自动引入组件的情况下,使用el-config-provide组件包裹住routerview

<template>
	<!-- 设置element组件中文化 -->
	<el-config-provider :locale="zhCn">
		<router-view></router-view>
	</el-config-provider>
</template>
<script setup lang="ts">
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
</script>

同时要声明文件,否则编译器会报错

// 声明文件,否则或导致编译器报错
declare module "element-plus/dist/locale/zh-cn.mjs";

vue3中挂载全局方法

1.新建文件,放入公共方法;例如新建一个filterempty文件

// 字段判空
export function filterEmpty(value: string) {
	//用于过滤 undefined,空字符串,null,'null'
	if (
		value === undefined ||
		value === "" ||
		value === null ||
		value === "null" ||
		value === " "
	) {
		return "--";
	} else {
		return value;
	}
}

2.在main.ts 中引入,同时添加声明文件,不然编译器会报错

import { filterEmpty } from "@/utils/filterEmpty";

declare module "@vue/runtime-core" {
	interface ComponentCustomProperties {
		...
		filterEmpty: Function;
		
	}
}

解决项目中引入ts文件报错的问题

在tsconfig.json中做如下配置

"compilerOptions":{
        ...
     "noEmit": true,
     "allowImportingTsExtensions": true,
     // 解决suppressImplicitAnyIndexErrors 参数报错问题问题
      "ignoreDeprecations": "5.0",
}
 

noEmit 必须配置为true,否则只配置allowImportingTsExtensions 或导致编译器报错