前期回顾   

Vue3 + TS 项目实战 - 后台管理系统 - 按钮权限_vue3+ts后台管理-CSDN博客

目录

🚩不使用NPM插件的方式

第一步：创建log函数-源码 

第二步：注册到window上

第三步：扩展Window接口

第四步：确保类型文件被TypeScript识别

第五步：使用window.log而不是log

 🤖 使用NPM库方式

第一步：使用 npm 安装

第二步：使用

 ❤️ 结语 

---

前言：控制台打印平平无奇，做一个美化的Hooks！

🚩不使用NPM插件的方式

第一步：创建log函数-源码 

位置：src\utils\Hooks\beautifyLog.ts

/**
 * 美化打印实现方法
 */
const prettyLog = () => {
	const isProduction =
		import.meta.env.MODE === "production" ||
		process.env.NODE_ENV === "production";

	const isEmpty = (value: any) => {
		return value == null || value === undefined || value === "";
	};
	const prettyPrint = (title: string, text: string, color: string) => {
		if (isProduction) return;
		console.log(
			`%c ${title} %c ${text} %c`,
			`background:${color};border:1px solid ${color}; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;`,
			`border:1px solid ${color}; padding: 1px; border-radius: 0 2px 2px 0; color: ${color};`,
			"background:transparent"
		);
	};
	const info = (textOrTitle: string, content = "") => {
		const title = isEmpty(content) ? "Info" : textOrTitle;
		const text = isEmpty(content) ? textOrTitle : content;
		prettyPrint(title, text, "#909399");
	};
	const error = (textOrTitle: string, content = "") => {
		const title = isEmpty(content) ? "Error" : textOrTitle;
		const text = isEmpty(content) ? textOrTitle : content;
		prettyPrint(title, text, "#F56C6C");
	};
	const warning = (textOrTitle: string, content = "") => {
		const title = isEmpty(content) ? "Warning" : textOrTitle;
		const text = isEmpty(content) ? textOrTitle : content;
		prettyPrint(title, text, "#E6A23C");
	};
	const success = (textOrTitle: string, content = "") => {
		const title = isEmpty(content) ? "Success " : textOrTitle;
		const text = isEmpty(content) ? textOrTitle : content;
		prettyPrint(title, text, "#67C23A");
	};
	const table = (dataPaylod: Array<{}>) => {
		const data = dataPaylod;
		console.log(
			"%c id%c name%c age",
			"color: white; background-color: black; padding: 2px 10px;",
			"color: white; background-color: black; padding: 2px 10px;",
			"color: white; background-color: black; padding: 2px 10px;"
		);

		data.forEach((row: any) => {
			console.log(
				`%c ${row.id} %c ${row.name} %c ${row.age} `,
				"color: black; background-color: lightgray; padding: 2px 10px;",
				"color: black; background-color: lightgray; padding: 2px 10px;",
				"color: black; background-color: lightgray; padding: 2px 10px;"
			);
		});
	};
	const picture = (url: string, scale = 1) => {
		if (isProduction) return;
		const img = new Image();
		img.crossOrigin = "anonymous";
		img.onload = () => {
			const c = document.createElement("canvas");
			const ctx = c.getContext("2d");
			if (ctx) {
				c.width = img.width;
				c.height = img.height;
				ctx.fillStyle = "red";
				ctx.fillRect(0, 0, c.width, c.height);
				ctx.drawImage(img, 0, 0);
				const dataUri = c.toDataURL("image/png");

				console.log(
					`%c sup?`,
					`font-size: 1px;
                    padding: ${Math.floor(
											(img.height * scale) / 2
										)}px ${Math.floor((img.width * scale) / 2)}px;
                    background-image: url(${dataUri});
                    background-repeat: no-repeat;
                    background-size: ${img.width * scale}px ${
						img.height * scale
					}px;
                    color: transparent;
                    `
				);
			}
		};
		img.src = url;
	};

	return {
		info,
		error,
		warning,
		success,
		picture,
		table,
	};
};
export interface PrettyLogFunctions {
	info: (textOrTitle: string, content?: string) => void;
	error: (textOrTitle: string, content?: string) => void;
	warning: (textOrTitle: string, content?: string) => void;
	success: (textOrTitle: string, content?: string) => void;
	picture: (url: string, scale?: number) => void;
	table: (dataPaylod: Array<{}>) => void;
}
// 创建打印对象
const log = prettyLog();
export default log;

第二步：注册到window上

在main.ts文件中，确保您将log正确地绑定到了window对象上：

位置;main.ts

import log from './utils/Hooks/beautifyLog';
window.log = log;

第三步：扩展Window接口

在项目中创建一个新的TypeScript声明文件（例如src/types/env.d.ts），用于扩展全局Window对象的类型定义：

位置：src\types\global.d.ts

import { PrettyLogFunctions } from '../utils/Hooks/beautifyLog';

// 声明文件，*.vue 后缀的文件交给 vue 模块来处理
declare module '*.vue' {
	import type { DefineComponent } from 'vue';
	const component: DefineComponent<{}, {}, any>;
	export default component;
}

// 声明文件，定义全局变量
declare global {
	interface Window {
		log: PrettyLogFunctions;
	}
}

第四步：确保类型文件被TypeScript识别

"include": [
		"src/**/*.ts",
		"src/**/*.d.ts",
		"src/types/**/*.d.ts",
		"src/**/*.tsx",
		"src/**/*.vue",
		"src/views/visualLargeScreen/complianceRiskSituation/perfect-auto-screen-fit.js"
	],

第五步：使用window.log而不是log

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  window.log.info('Component mounted');
});
</script>

这样，您就可以在不引入任何额外模块的情况下，在全局范围内使用prettyLog的功能。

 window.log有以下方法：

         info,

        error,

        warning,

        success,

        picture,

        table,

 🤖 使用NPM库方式

第一步：使用 npm 安装

npm install pretty-log-plugin

第二步：使用

第一种方式 “引入”

import log from "pretty-log-plugin";
log.info("Hello, world!");

第二种方式：挂在window

参考上面

❤️ 结语 

 _______________________________  期待再见  _______________________________