# vite-plugin-fancy

**Repository Path**: overflow_z/vite-plugin-fancy

## Basic Information

- **Project Name**: vite-plugin-fancy
- **Description**: vite-plugin-fancy 
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://www.npmjs.com/package/vite-plugin-fancy?activeTab=readme
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-10
- **Last Updated**: 2025-09-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @FileDescription: 
 * @Author       : zoujunjie
 * @Date         : 2025-09-06 20:06:35
 * @LastEditors  : zoujunjie
 * @LastEditTime : 2025-09-06 22:51:41
-->
# 🎉 Vite Plugin Fancy Console 使用指南

> 让开发调试信息变得更优雅的 Vite 插件

## 📦 安装

```bash
npm install vite-plugin-pconsole --save-dev
# 或
yarn add vite-plugin-pconsole -D

```
## 🚀 快速开始

```javascript
// vite.config.js
import { defineConfig } from 'vite'
import {fancyPlugin} from 'vite-plugin-pconsole'

export default defineConfig({
  plugins: [
    fancyPlugin({
      icon: '🐳',  // 自定义前缀图标
      timeFormat: 'HH:mm:ss',  // 时间显示格式
      showFileName: true,  // 显示文件名
      showLineNumber: true  // 显示行号
    })
  ]
})
```

## 🔧 配置选项

| 参数 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| icon | `string` | `🐳` | 自定义前缀图标 |
| timeSeparator | `string` | ` - ` | 时间与日志内容之间的分隔符 |
| fileLineSeparator | `string` | `:` | 文件名与行号之间的分隔符 |
| styles | `object` | `{}` | 自定义样式配置 |
| prefix | `string` | `` | 日志输出前缀 |
| root | `string` | `process.cwd()` | 项目根目录 |
| silentProduction | `boolean` | `false` | 生产环境是否静默输出 |
| exclude | `string[]` | [/node_modules/] | 排除的文件路径，支持正则表达式 |
| include | `string[]` | [/\.(js|ts|jsx|tsx|vue)$/] | 包含的文件路径，支持正则表达式 |
| timeFormat | `string` | `YYYY-MM-DD HH:mm:ss` | 时间显示格式 |
| showFileName | `boolean` | `false` | 是否显示文件名 |
| showLineNumber | `boolean` | `false` | 是否显示行号 |

### 高级样式配置

```javascript
// 颜色配置示例
{
  styles: {
    log: '#1890ff',    // 蓝色
    info: '#52c41a',   // 绿色
    warn: '#faad14',   // 橙色
    error: '#ff4d4f'   // 红色
  }
}
```
<!-- 表格 -->
| 参数 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| log | `string` | `#1890ff` | 日志颜色 |
| info | `string` | `#52c41a` | 信息颜色 |
| warn | `string` | `#faad14` | 警告颜色 |
| error | `string` | `#ff4d4f` | 错误颜色 |

## 🎨 使用示例

```javascript
const MENU_ITEMS = [
  { key: '1', label: '实验室简介', component: 'Tech' },
  { key: '2', label: '研究方向', component: 'Pos' },
  { key: '3', label: '规章制度', component: 'Zd' },
  { key: '4', label: '联系我们', component: 'Contact' },
]
console.log(MENU_ITEMS)
console.warn(MENU_ITEMS)
console.error(MENU_ITEMS)
console.info(MENU_ITEMS)
console.debug(MENU_ITEMS)

```
## 📌 效果展示
![image](./images/preview.png)
## 📝 贡献指南

欢迎提交 Pull Request 或 Issue，共同改进这个项目。

## 仓库地址
[vite-plugin-fancy](https://gitee.com/overflow_z/vite-plugin-fancy.git)