前期回顾   

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

参考上面

❤️ 结语 

 _______________________________  期待再见  _______________________________