程序员盒子

Appearance

时间插件 ​

插件名称插件地址Demo插件描述
Day.js查看预览日期时间处理组件
moment查看预览在 JavaScript 中解析、验证、操作和显示日期和时间
date-fns查看预览date-fns 用于在浏览器和 Node.js 中操作 JavaScript 日期
timeago.js查看-专注于显示相对时间（例如“5 分钟前”或者“3 天后”）

视频插件 ​

插件名称插件地址Demo插件描述
video.js查看预览视频播放器
plyr查看预览一个简单、易用且可定制的媒体播放器
artplayer查看预览一款现代且功能齐全的 HTML5 视频播放器
hls.js查看预览一个专注于 HLS（HTTP Live Streaming）播放的 JavaScript 库
xgplayer查看预览一款带解析器、能节省流量的 HTML5 视频播放器
ckplayer x3查看预览用于在网页上播放视频的 JS 插件
aliplayer查看预览阿里云 Web 播放器 SDK

条形码插件 ​

插件名称插件地址Demo插件描述
JsBarcode查看预览一个纯 JavaScript 实现的条形码生成器，支持多种条形码格式
quagga查看预览一个开源的条形码和二维码扫描库，支持 HTML5 和现代浏览器

图片插件 ​

插件名称插件地址Demo插件描述
merge-images查看-图像合成插件
v-viewer查看预览图片浏览组件
hevue-img-preview查看预览图片浏览插件

适配插件 ​

插件名称插件地址Demo插件描述
postcss-mobile-forever查看预览PostCSS 伸缩视图转换插件
postcss-px-to-viewport查看-将 px 单位转换为视口单位的(vw,vh,vmin,vmax)的 PostCSS 插件.
Autoprefixer查看-基于 Can I Use 的数据， 为 CSS 添加必要的厂商前缀
postcss-pxtorem查看-PostCSS 的一个插件，可以从像素单位生成 rem 单位

打包插件 ​

@vitejs/plugin-vue-jsx ​

Provides Vue 3 JSX & TSX support with HMR.

ts
// vite.config.js
import vueJsx from '@vitejs/plugin-vue-jsx';

export default defineConfig(() => {
  return {
    plugins: [
      vueJsx({
        // options are passed on to @vue/babel-plugin-jsx
      }),
    ],
  };
});

unplugin-auto-import ​

为 Vite、Webpack、Rspack、Rollup 和 esbuild 自动按需导入 API，并支持 TypeScript。由 unplugin 提供支持。

without ​

js
import { computed, ref } from 'vue';

const count = ref(0);
const doubled = computed(() => count.value * 2);

with ​

js
const count = ref(0);
const doubled = computed(() => count.value * 2);

vite 配置 ​

pnpm i unplugin-vue-components unplugin-auto-import/vite -D

js
import AutoImport from 'unplugin-auto-import/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig(() => {
  return {
    plugins: [
      AutoImport({
        include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/],
        imports: ['vue', 'pinia', 'vue-router'],
        // 调整自动引入的文件位置
        dts: './auto-import.d.ts',
        // 解决自动引入eslint报错问题 需要在eslintrc的extend选项中引入
        eslintrc: {
          enabled: true,
          // 配置文件的位置
          filepath: './.eslintrc-auto-import.json',
          globalsPropValue: true,
        },
        // 自动导入element
        resolvers: [AntDesignVueResolver()],
      }),
    ],
  };
});

unplugin-vue-components ​

按需自动导入 Vue 组件。

js
import {
  AntDesignVueResolver,
  ElementPlusResolver,
  VantResolver,
} from 'unplugin-vue-components/resolvers';
// vite.config.js
import Components from 'unplugin-vue-components/vite';

// your plugin installation
Components({
  resolvers: [AntDesignVueResolver(), ElementPlusResolver(), VantResolver()],
});

vite-plugin-compression ​

使用 gzip 或者 brotli 来压缩资源.

js
import viteCompression from 'vite-plugin-compression';

export default () => {
  return {
    plugins: [viteCompression()],
  };
};

配置说明 ​

参数类型默认值说明
verbosebooleantrue是否在控制台输出压缩结果
filterRegExp or (file: string) => booleanDefaultFilter指定哪些资源不压缩
disablebooleanfalse是否禁用
thresholdnumber-体积大于 threshold 才会被压缩,单位 b
algorithmstringgzip压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
extstring.gz生成的压缩包后缀
compressionOptionsobject-对应的压缩算法的参数
deleteOriginFileboolean-压缩后是否删除源文件

示例 ​

js
commpressPlugin({
  verbose: true, // 默认即可
  disable: false, // 开启压缩(不禁用)，默认即可
  deleteOriginFile: false, // 删除源文件
  threshold: 1024, // 压缩前最小文件大小
  algorithm: 'gzip', // 压缩算法
  ext: '.gz', // 文件类型
});

splitVendorChunkPlugin ​

splitVendorChunk 是 Vite 提供的一种模块分割策略，用于将第三方依赖（如 node_modules 中的模块）提取到单独的 vendor chunk 中

js
import { defineConfig, splitVendorChunkPlugin } from 'vite';

export default defineConfig({
  plugins: [
    splitVendorChunkPlugin(), // 添加插件
  ],
});

loadEnv ​

使用 dotenv 解析 .env 文件内容

js
import { defineConfig, loadEnv } from 'vite';
import path from 'path';

export default defineConfig(({ mode }) => {
  // 加载环境变量
  const env = loadEnv(mode, path.resolve(__dirname, './env'));

  return {
    define: {
      // 将环境变量注入到客户端
      'process.env': env,
    },
  };
});

vite-plugin-lazy-import ​

用于 Vite 的按需懒加载导入 JavaScript 和样式文件。

js
// vite.config.js
import { lazyImport } from 'vite-plugin-lazy-import';

export default defineConfig({
  // ...
  plugins: [
    lazyImport({
      resolvers: [
        VxeResolver({
          libraryName: 'vxe-table',
        }),
        VxeResolver({
          libraryName: 'vxe-pc-ui',
        }),
      ],
    }),
  ],
  // ...
});

@vitejs/plugin-basic-ssl ​

本地运行支持 https

js
// vite.config.js
import basicSsl from '@vitejs/plugin-basic-ssl';

export default {
  plugins: [basicSsl()],
};

unocss/vite ​

原子化 css

js
import UnoCSS from 'unocss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [UnoCSS()],
});

Create a uno.config.ts file: ​

ts
import { defineConfig, presetAttributify, presetWind3 } from 'unocss';

export default defineConfig({
  // 预设
  presets: [
    // 属性化模式 & 无值的属性模式
    presetAttributify({
      prefix: 'un-',
      prefixedOnly: false,
    }),
    // 默认预设
    presetWind3({
      important: '#app',
    }),
  ],
  // 自定义规则
  rules: [],
  // 自定义快捷方式
  shortcuts: {
    'wh-full': 'w-full h-full',
    'flex-center': 'flex justify-center items-center',
    'flex-x-center': 'flex justify-center',
    'flex-y-center': 'flex items-center',
  },
});

Add virtual:uno.css to your main entry ​

ts
import 'virtual:uno.css';

unplugin-svg-component ​

js
// vite.config.ts
import { defineConfig } from 'vite';
import SvgComponent from 'unplugin-svg-component/vite';

export default defineConfig({
  plugins: [
    SvgComponent({
      iconDir: [resolve(__dirname, 'src/common/assets/icons')],
      preserveColor: resolve(__dirname, 'src/common/assets/icons/preserve-color'),
      dts: true,
      dtsDir: resolve(__dirname, 'types/auto'),
    }),
  ],
});

alt text

types/auto ​

svg-component.d.ts

ts
/* eslint-disable */
/* prettier-ignore */
// biome-ignore format: off
// biome-ignore lint: off
// @ts-nocheck
// Generated by unplugin-svg-component
declare module '~virtual/svg-component' {
  const SvgIcon: import("vue").DefineComponent<{
      name: {
          type: import("vue").PropType<"dashboard" | "fullscreen-exit" | "fullscreen" | "keyboard-down" | "keyboard-enter" | "keyboard-esc" | "keyboard-up" | "search">;
          default: string;
          required: true;
      };
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
      name: {
          type: import("vue").PropType<"dashboard" | "fullscreen-exit" | "fullscreen" | "keyboard-down" | "keyboard-enter" | "keyboard-esc" | "keyboard-up" | "search">;
          default: string;
          required: true;
      };
  }>>, {
      name: "dashboard" | "fullscreen-exit" | "fullscreen" | "keyboard-down" | "keyboard-enter" | "keyboard-esc" | "keyboard-up" | "search";
  }>;
  export const svgNames: ["dashboard", "fullscreen-exit", "fullscreen", "keyboard-down", "keyboard-enter", "keyboard-esc", "keyboard-up", "search"];
  export type SvgName = "dashboard" | "fullscreen-exit" | "fullscreen" | "keyboard-down" | "keyboard-enter" | "keyboard-esc" | "keyboard-up" | "search";
  export default SvgIcon;
}

svg-component-global.d.ts

ts
/* eslint-disable */
/* prettier-ignore */
// biome-ignore format: off
// biome-ignore lint: off
// @ts-nocheck
// Generated by unplugin-svg-component
import 'vue'
declare module 'vue' {
  export interface GlobalComponents {
    SvgIcon: import('vue').DefineComponent<
      {
        name: {
          type: import('vue').PropType<
            | 'dashboard'
            | 'fullscreen-exit'
            | 'fullscreen'
            | 'keyboard-down'
            | 'keyboard-enter'
            | 'keyboard-esc'
            | 'keyboard-up'
            | 'search'
          >;
          default: string;
          required: true;
        };
      },
      {},
      unknown,
      {},
      {},
      import('vue').ComponentOptionsMixin,
      import('vue').ComponentOptionsMixin,
      {},
      string,
      import('vue').VNodeProps &
        import('vue').AllowedComponentProps &
        import('vue').ComponentCustomProps,
      Readonly<
        import('vue').ExtractPropTypes<{
          name: {
            type: import('vue').PropType<
              | 'dashboard'
              | 'fullscreen-exit'
              | 'fullscreen'
              | 'keyboard-down'
              | 'keyboard-enter'
              | 'keyboard-esc'
              | 'keyboard-up'
              | 'search'
            >;
            default: string;
            required: true;
          };
        }>
      >,
      {
        name:
          | 'dashboard'
          | 'fullscreen-exit'
          | 'fullscreen'
          | 'keyboard-down'
          | 'keyboard-enter'
          | 'keyboard-esc'
          | 'keyboard-up'
          | 'search';
      }
    >;
  }
}

main.ts ​

ts
// main.ts
import SvgIcon from '~virtual/svg-component';

app.component(SvgIcon.name, SvgIcon);

使用 ​

ts
// App.tsx
import SvgIcon from '~virtual/svg-component';

function App() {
  return (
    <div className="logo">
      <SvgIcon name="icon-react"></SvgIcon>
    </div>
  );
}

git 评论插件 ​

插件名称插件地址Demo插件描述
giscus查看预览利用 GitHub Discussions 实现的评论系统
utterances查看-A lightweight comments widget built on GitHub issues
Beaudar查看-Beaudar 名称源于粤语“表达”的发音，是 Utterances 的中文版本

其他插件 ​

插件名称插件地址Demo插件描述
auto-i18n-translation-plugins查看-前端自动翻译插件，集成有道翻译和谷歌翻译
enlarge-file-upload查看预览大文件切片上传

Last updated: