【常用组件整理】

xgplayer 字节开发的前端视频播放器

	xgplayer是一个由字节跳动开发的强大的前端视频播放器，具有稳定性高、文档清晰、支持弹幕和移动端优化
等特点。相较于VideoJs，xgplayer的文档更简洁，自定义插件更为便捷。
	xgplayer还提供了丰富的插件来扩展功能，例如支持FLV格式的xgplayer-flv插件，支持M3U8格式的
xgplayer-hls.js插件，以及弹幕功能的插件等

npm install xgplayer

import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';

<template>
  <div ref="player"></div>
</template>

<script>
import Player from 'xgplayer';

export default {
  mounted() {
    const playerOpts = {
      id: 'player',
      url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
      height: 400,
      width: 500,
      autoplay: true,
      // 其他配置...
    };
    const player = new Player(playerOpts);
  }
}
</script>

vue-types 可配置的父传子prop验证器

vue-types是一个为Vue.js设计的可配置的prop验证器集合，灵感来源于React的prop-types。它提供了一种简洁流畅的接口来定义复杂的组件prop验证，使得在Vue.js中进行细粒度的prop验证变得更加方便和高效。

npm install vue-types --save

import VueTypes from 'vue-types';

// 使用VueTypes定义你的组件props
import Vue from 'vue';
import VueTypes from 'vue-types';

export default Vue.extend({
  name: 'ComplexComponent',
  props: {
    name: VueTypes.string.isLength(2, 20).isRequired,
    age: VueTypes.number.def(0).isGreaterThan(0),
    isStudent: VueTypes.bool.def(false),
    address: VueTypes.object.shape({
      street: VueTypes.string.isLength(3, 50),
      city: VueTypes.string.isLength(2, 50),
      country: VueTypes.string.isLength(2, 50),
    }).def({}),
    hobbies: VueTypes.array.of(VueTypes.string.isLength(1, 50)).def([]),
    contactNumber: VueTypes.string.isPhoneNumber.def(''),
  },
});
}

.def 默认值
.isRequired() 必需

vue-json-pretty 将 JSON 数据渲染为树形结构的 Vue 组件

vue-json-pretty 是一个用于将 JSON 数据渲染为树形结构的 Vue 组件。它的主要功能是帮助用户更清晰地查看和理解 JSON 数据。这个组件支持 Vue 3 和 Vue 2，且具备多种配置选项，例如是否显示行号、是否显示图标、是否支持编辑等。
主要功能：
JSON 格式化：将 JSON 数据以树形结构展示，方便用户阅读和理解。
数据选择：支持从 JSON 数据中获取特定节点的数据。
大数据支持：能够处理大规模的 JSON 数据，并提供虚拟滚动功能以优化性能。
可编辑：支持对 JSON 数据进行编辑，并提供多种触发编辑的方式（如单击或双击）。
主题设置：支持 light 和 dark 两种主题，适应不同的界面风格。
事件处理：提供多个事件处理功能，如 nodeClick、bracketsClick 和 iconClick，增强了组件的交互性

npm install vue-json-pretty

<VueJsonPretty
    v-model:data="localModelValue"
    :deep="deep"
    :show-length="showLength"
    :show-line-numbers="showLineNumbers"
    :show-line-number="showLineNumber"
    :show-icon="showIcon"
    :show-double-quotes="showDoubleQuotes"
    :virtual="virtual"
    :height="height"
    :item-height="itemHeight"
    :root-path="rootPath"
    :node-selectable="nodeSelectable"
    :selectable-type="selectableType"
    :show-select-controller="showSelectController"
    :select-on-click-node="selectOnClickNode"
    :highlight-selected-node="highlightSelectedNode"
    :collapsed-on-click-brackets="collapsedOnClickBrackets"
    :render-node-key="renderNodeKey"
    :render-node-value="renderNodeValue"
    :editable="editable"
    :editable-trigger="editableTrigger"
    @node-click="nodeClick"
    @brackets-click="bracketsClick"
    @icon-click="iconClick"
    @selected-change="selectedChange"
  />

vue-i18n 国际化语言插件

vue-i18n 是一个 Vue.js 的国际化插件，用于实现多语言支持。它允许开发者在应用程序中轻松地添加多语言功能，以便用户可以根据自己的语言偏好选择显示的语言。通过 Vue i18n，开发者可以：

多语言支持：允许应用支持多种语言，使得应用能够适应不同的语言环境，提供更好的用户体验。

文本翻译：提供了一种简单的方式来翻译应用程序中的文本。

语言切换：支持在运行时动态切换应用的语言，而无需重新加载页面。

格式化：支持日期、数字等类型的格式化，这对于构建国际化应用至关重要

npm install vue-i18n
// 创建 Vue i18n 实例
const messages = {
  en: {
    message: {
      hello: 'Hello World!'
    }
  },
  zh: {
    message: {
      hello: '你好世界！'
    }
  }
};

const i18n = new VueI18n({
  locale: 'en', // 设置默认语言
  messages // 设置语言消息
});
// 注册 main.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import messages from './locales';  // 引入语言文件

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en',  // 设置默认语言
  messages,  // 消息对象
});

new Vue({
  i18n,  // 把 i18n 实例传递给根 Vue 实例
  render: h => h(App),
}).$mount('#app');
// 切换中英文
<template>
  <div>
    <h1>{{ $t('message.hello') }}</h1>
    <button @click="changeLanguage('zh')">切换到中文</button>
    <button @click="changeLanguage('en')">切换到英文</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang;
    }
  }
};
</script>

// 页面使用
<p>{{ $t('hello') }}</p>
<p>{{ $t('message.hello') }}</p>

全局方法 组件 插件 参数

//全局方法
Vue.prototype.$getDicts = function (key) {
  return getDicts(key);
};
this.$getDicts(this.key)
//全局参数
Vue.config.globalProperties.$globalParam = 'some value';
this.$globalParam;
//全局组件
Vue.component('my-global-component', MyGlobalComponent);
<my-global-component></my-global-component>
//全局插件
Vue.use(VueI18n);
this.$i18n.locale = lang;

vue-draggable-plus Vue 3 和 Vue 2 的拖拽组件库

vue-draggable-plus 是一个支持 Vue 3 和 Vue 2 的拖拽组件库，基于 Sortable.js，提供高度兼容性和灵活性，适用于多种拖拽场景。它解决了 Sortable.js 官方 Vue 组件在使用上的痛点，使得开发者可以在任何元素上使用拖拽列表，通过指定目标容器，确保了与各种组件库的良好集成。
vue-draggable-plus 还提供了许多其他功能，如滚动支持、悬浮拖拽、拖拽分组和样式自定义等

npm install vue-draggable-plus

<template>
  <div>
    <VueDraggable v-model="list" :animation="200">
      <div v-for="item in list" :key="item.id">{{ item.name }}</div>
    </VueDraggable>
  </div>
</template>

<script>
import { ref } from 'vue';
import { VueDraggable } from 'vue-draggable-plus';

export default {
  components: {
    VueDraggable
  },
  setup() {
    const list = ref([
      { name: 'Joao', id: 1 },
      { name: 'Jean', id: 2 },
      { name: 'Johanna', id: 3 },
      { name: 'Juan', id: 4 }
    ]);
    return { list };
  }
};
</script>

url Node.js的内置模块 解析地址为对象

Node.js的内置模块。这个模块提供了一个简单的工具来解析、构建和修改URLs。
url.parse方法将URL字符串解析为一个对象，该对象包含协议、用户名、密码、主机名、端口、路径和查询参数等部分

const url = require('url');

let parsedUrl = url.parse('http://user:pass@google.com:8080/foo?bar=baz#qux');
console.log(parsedUrl);

qs 处理 URL 参数序列化和反序列化的 JavaScript 库

qs 是一个用于处理 URL 参数序列化和反序列化的 JavaScript 库。它提供了一个简单且功能强大的方法来将 JavaScript 对象转换为 URL 参数字符串，以及将 URL 参数字符串解析为 JavaScript 对象
文档

const qs = require('qs');

const params = {
  name: '张三',
  age: 25,
  location: '北京'
};

const queryString = qs.stringify(params);
console.log(queryString);  // 输出: "name=张三&age=25&location=北京"

const qs = require('qs');

const queryString = 'name=张三&age=25&location=北京';

const params = qs.parse(queryString);
console.log(params);  // 输出: { name: '张三', age: '25', location: '北京' }

qrcode 生成二维码的库

qrcode主要负责生成二维码。它可以接受文本、URL或其他信息，并生成一个可以扫描的二维码图像。这种二维码通常用于快速访问、存储或分享信息。

npm install qrcode 

var qrcode = new QRCode(document.getElementById("qrcode"), {
  text: "https://example.com",
  width: 200,
  height: 200,
});

pinia 和 pinia-plugin-persistedstate

pinia 是一个为 Vue.js 应用程序设计的状态管理库。它提供了一种轻量级的、可组合的方式来管理应用中的状态。pinia-plugin-persistedstate 是 pinia 的一个插件，用于实现状态的持久化。
pinia
1、全局状态管理：允许你在应用程序的不同组件之间共享状态。
2、简化 API：与 Vuex 相比，Pinia 提供了更简单的 API，使开发者能够更容易地管理和操作状态。
3、TypeScript 支持：Pinia 完全支持 TypeScript，这意味着你可以利用 TypeScript 的类型检查和自动完成功能来编写更安全的代码。
4、组合式 API：Pinia 支持 Vue 3 的组合式 API，这意味着你可以使用 setup() 函数和 ref、computed 等响应式工具来管理状态。

pinia-plugin-persistedstate 主要负责：

状态持久化：将 Pinia store 中的状态保存到浏览器的本地存储（如 localStorage 或 sessionStorage）中。这样，当页面刷新或用户关闭并重新打开浏览器时，这些状态仍然可以保持。

自动恢复：当应用加载时，从本地存储中恢复之前保存的状态。

// 安装
npm install pinia pinia-plugin-persistedstate
// 配置 Pinia 实例
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate());
// 应用 在你的 store 定义中，不需要额外的配置，pinia-plugin-persistedstate 将会自动处理状态的持久化和恢复。
import { defineStore } from 'pinia';

export const useMyStore = defineStore('myStore', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

nprogress 进度条库

NProgress 是一个轻量级的进度条库，它可以在单页应用（SPA）的页面加载或 AJAX 请求等操作时显示一个进度条，从而向用户提供加载提示，提升用户体验。

npm install nprogress

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
NProgress.start();
NProgress.done();
NProgress.configure({
  easing: 'ease',
  speed: 200,
  showSpinner: false
});

monaco-editor 代码编辑器

Monaco Editor 是一个由微软开源的基于浏览器的代码编辑器，它是 Visual Studio Code（VS Code）的核心部分。Monaco Editor 提供了丰富的特性，包括语法高亮、代码折叠、代码提示（IntelliSense）、多光标选择、搜索和替换等。Monaco Editor 支持多种编程语言，包括JavaScript、TypeScript、JSON、HTML、CSS、Less、Sass 等。此外，还可以通过 Monarch 或 Language Server Protocol（LSP）添加对其他语言的支持。Monaco Editor 使用 Web 技术（HTML、CSS 和 JavaScript）开发，可以轻松地集成到 Web 应用中。

npm install monaco-editor

//引入monaco-editor
import { createApp } from 'vue';
import MonacoEditor from 'monaco-editor';

// 引入必要的monaco-editor的worker文件
import 'monaco-editor/esm/vs/editor/editor.main.nls.js';
import 'monaco-editor/esm/vs/editor/editor.main.css';
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js';

// 创建Vue应用
const app = createApp({});

// 在Vue组件中使用MonacoEditor
app.component('monaco-editor', {
  props: ['value', 'language', 'theme', 'options'],
  template: '<div ref="container"></div>',
  mounted() {
    this.editor = MonacoEditor.create(this.$refs.container, {
      value: this.value,
      language: this.language,
      theme: this.theme,
      ...this.options
    });
  },
  watch: {
    value(newValue) {
      this.editor.setValue(newValue);
    },
    language(newValue) {
      this.editor.updateOptions({ language: newValue });
    },
    theme(newValue) {
      MonacoEditor.setTheme(newValue);
      this.editor.updateOptions({ theme: newValue });
    }
  },
  beforeUnmount() {
    if (this.editor) {
      this.editor.dispose();
    }
  }
});

app.mount('#app');
// 使用
<template>
  <div>
    <monaco-editor v-model:value="code" :language="language" :theme="theme" :options="editorOptions" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: '// 编写你的代码...',
      language: 'javascript',
      theme: 'vs-dark',
      editorOptions: {
        selectOnLineNumbers: true,
        roundedSelection: false,
        readOnly: false,
        cursorStyle: 'line',
        automaticLayout: false
      }
    };
  }
};
</script>

mitt 轻量性和简单性 实现任意组件间的通信

实现任意组件间的通信，mitt相当于 上一节自定义事件 的一个规范性包，让我们可以规范写 绑定组件（emitter.on） 和 触发组件（emitter.emitt）
mitt是一个轻量级的事件总线库，用于在应用程序的不同部分之间进行事件驱动的通信。它提供了简单的API来创建、监听和触发事件，使组件间的通信变得简单且易于管理。mitt适用于各种JavaScript环境，包括Vue.js应用。

mitt由于其轻量性和简单性，在Vue.js应用中的组件间通信中是一种非常实用的工具。

npm install mitt

// main.js引入
import { createApp } from 'vue';
import App from './App.vue';
import mitt from 'mitt';
const app = createApp(App);
const emitter = mitt();
app.config.globalProperties.$bus = emitter;
app.mount('#app');
//在组件中使用mitt： 在需要通信的组件中，可以通过this.$bus访问全局的事件总线实例。
// 组件A中，使用emit方法触发事件
this.$bus.emit('custom-event', { message: 'Hello from Component A' });

// 组件B中，使用on方法监听事件
this.$bus.on('custom-event', (data) => {
    console.log(data.message); // 输出 'Hello from Component A'
});
//监听和移除事件
import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
    this.$bus.on('custom-event', (data) => {
        console.log(data.message);
    });
});

onUnmounted(() => {
    this.$bus.off('custom-event');
});

lodash-es ES6 的函数和工具

lodash-es 是一个 JavaScript 的实用工具库，提供了许多有用的函数和工具，用于处理数组、对象、数字、字符串、函数等。它的目标是为开发者提供一个更简洁、更易于使用的工具集，帮助他们在处理各种常见编程任务时避免复杂的代码。
lodash-es 的 “es” 后缀意味着这个版本的 lodash 是为 ES6 模块系统设计的，更适合现代 JavaScript 项目。
文档

npm install lodash-es

import { map } from 'lodash-es';

return map(arr, (item) => item * 2);//对数组进行映射操作
return filter(arr, (num) => num % 2 === 0);//对数组进行过滤操作。
return get(obj, key, 'default value');//从对象中安全地获取属性值。
    return isEqual(a, b);//判断两个值是否相等。
    debouncedMethod: debounce(function() {//防抖函数，常用于处理高频事件。
    // ...
  }, 300)

echarts-wordcloud 基于 echarts 的一个词云库

echarts-wordcloud 是基于 echarts 的一个词云库，用于在 echarts 可视化图表中创建词云。它能够和 echarts.js 完美融合，使用起来非常方便，支持自定义词云的颜色、形状、布局和样式等多种设置。

npm install echarts echarts-wordcloud

import * as echarts from 'echarts';
import 'echarts-wordcloud';

export default {
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      var myChart = echarts.init(document.getElementById("wordChart"));
      let option = {
        series: [
          {
            type: "wordCloud",
            // ...其他配置，如 sizeRange, rotationRange, data 等
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  }
}
<template>
  <div class="chartBox">
    <div id="wordChart" style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>

driver.js

driver.js 是一个开源的、轻量级的 JavaScript 库，用于创建引导（tour）和教程。它允许你在网页上添加交互式的引导步骤，帮助用户了解或熟悉网页的某个特定部分。

driver.js 主要负责以下几个功能：

创建引导：允许你定义多个步骤，每个步骤都可以有标题、描述和指向特定元素的箭头。

自定义样式：你可以自定义每个引导步骤的样式，包括颜色、背景、字体等。

交互：用户可以点击“下一步”或“上一步”按钮来导航引导，也可以关闭引导。

兼容性：driver.js 支持现代浏览器，包括 Chrome、Firefox、Safari、Edge 等。

npm install driver.js
import Driver from 'driver.js';

export default {
  mounted() {
    this.initTour();
  },
  methods: {
    initTour() {
      const driver = new Driver();
      
      driver.defineSteps([
        {
          element: '#element1',
          popover: {
            title: '标题1',
            desc: '描述1',
            position: 'right'
          },
          onEnd: function() {
            // 当步骤结束时，你可以在这里添加额外的逻辑
          }
        },
        // ... 添加更多步骤
      ]);
      
      driver.start();
    }
  }
}
//在模板中添加元素
<div id="element1">这是一个元素</div>

dayjs 日期库

Day.js 是一个轻量级的 JavaScript 日期库，用于解析、验证、操作和显示日期和时间。它提供了与 Moment.js 类似的 API，但体积更小，加载速度更快。Day.js 专注于日期和时间的计算，不包含时间格式的解析或本地化功能，这使得它在体积上非常小巧，同时保持了高性能。Day.js 支持多种语言，易于定制，非常适合在前端开发中处理日期和时间问题。

npm install dayjs

import dayjs from 'dayjs';
Vue.prototype.$dayjs = dayjs;

export default {
  mounted() {
    this.initDate();
  },
  methods: {
    initDate() {
      const currentDateTime = this.$dayjs().format('YYYY-MM-DD HH:mm:ss');
      // 这里的 currentDateTime 就是格式化后的当前日期和时间
    }
  }
}

cropperjs 图像的裁剪

Cropper.js 是一个轻量级的 JavaScript 库，主要用于处理图像的裁剪。它支持各种浏览器，包括 Chrome、Firefox、Safari、Edge 和 IE11 等。Cropper.js 提供了强大的功能，包括裁剪、缩放、旋转和翻转图像，同时还可以自定义样式和配置，以满足不同的需求。

配置：可以配置 VueCropper 组件的属性，如 src（图片源路径）、aspectRatio（裁剪框的宽高比）等。

方法调用：可以通过 $refs 访问 VueCropper 实例，并调用其内部方法，如 rotate（旋转）等

npm install vue-cropperjs

import Vue from 'vue';
import VueCropper from 'vue-cropperjs';
Vue.component('VueCropper', VueCropper);

<template>
  <VueCropper ref="cropper" :src="imgSrc" alt="上传图片" />
</template>

animate.css CSS 动画库

animate.css 是一个流行的 CSS 动画库，它包含了一系列预定义的动画效果，可以轻松地应用到 HTML 元素上。这些动画效果包括淡入淡出、滑动、缩放、旋转等。使用 animate.css，你可以为网页上的元素添加动态效果，提升用户体验。

不需要通过 npm 或 yarn 安装。你可以直接从官方网站下载它，或者通过 CDN 链接引入。
animate.css的GitHub仓库地址是：https://github.com/daneden/animate.css。
文档

<div class="animated fadeIn">这是一个带有淡入效果的元素</div>

<transition name="fade">
  <div v-if="show">这是一个可以切换的元素</div>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

@zxcvbn-ts/core 密码强度估计器

@zxcvbn-ts/core是一个基于TypeScript的密码强度估计器，它基于zxcvbn密码强度估计器。这个库用于帮助开发者评估用户设置的密码的复杂度和安全性。这个库的计算依据包括密码长度、字符类型、词典攻击检测、评分系统和熵计算。它提供了一个分数系统，从0到4分，分数越高表示密码越安全。

import { zxcvbn } from '@zxcvbn-ts/core';

// 使用zxcvbn函数计算密码强度
console.log(zxcvbn('123').score); // 0
console.log(zxcvbn('123123#@!').score); // 1
console.log(zxcvbn('123123#@!').score); // 2
console.log(zxcvbn('123123#@!*a').score); // 3
console.log(zxcvbn('123_a_123#@!').score); // 4

@wangeditor/editor-for-vue 富文本编辑器

@wangeditor/editor-for-vue是一个为Vue.js设计的富文本编辑器组件，它基于wangEditor核心库，提供了一个在Vue应用中易于使用的富文本编辑器。这个组件提供了文本编辑器的所有基本功能，包括文本格式化、插入图片、链接、表格等，并且可以根据需要扩展功能。

npm install @wangeditor/editor @wangeditor/editor-for-vue

// 在Vue组件中引入Editor和Toolbar组件
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
// 配置编辑器： 使用editorConfig选项配置编辑器，包括占位符、是否只读、是否自动聚焦等
const editorConfig = ref({
  placeholder: '请输入内容...',
  readOnly: false,
  autoFocus: true,
  scroll: true,
  maxLength: 1000,
  // 其他配置...
});

// 创建编辑器实例： 在Vue组件的setup函数中，创建Editor实例并将其附加到editorRef
const editorRef = shallowRef();
onMounted(() => {
  editorRef.value.create();
});
// 插入编辑器组件到模板： 在Vue组件的模板中，插入Editor和Toolbar组件，并使用v-model绑定编辑器的内容：
<Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
<Editor
  v-model="content"
  :defaultConfig="editorConfig"
  :mode="mode"
  @onCreated="handleEditorCreated"
/>
// 处理编辑器创建完成的事件： 在handleEditorCreated函数中，获取编辑器实例并处理任何需要的初始化操作：
const handleEditorCreated = (editor) => {
  console.log(editor);
  // 其他处理...
};

@vueuse/core 组合拳

@vueuse/core 是 Vue 的一个辅助库，它提供了一系列的功能和工具，以帮助你更有效地使用 Vue。这些工具是基于 Vue 的 Composition API 设计的，可以帮助你更好地组织和管理你的代码。

它提供了以下一些功能：

useState：用于创建响应式状态变量。

useRef：用于创建响应式引用，可以引用 DOM 元素或任何其他值。

useContext：用于读取和响应式地跟踪 Vue 3 的 Context API。

useAttrs 和 useProps：用于获取和响应式地跟踪父组件传递的 props 和属性。

useSlots：用于获取和使用插槽。

useExpose：用于在子组件中暴露方法或属性给父组件。

useToggle：用于创建可切换的状态。

useMemo：用于缓存和响应式地返回计算值。

这些功能使得使用 Vue 的 Composition API 变得更为简单和直观。
官网

npm install @vueuse/core

import { ref, useExpose } from '@vueuse/core'

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    const expose = useExpose({
      count,
      increment
    })

    return {}
  }
}

iconify 图标库

@iconify/iconify和@iconify/vue都是用于在Vue.js项目中使用图标的库。它们提供了一种简单、一致的方式来在你的Vue组件中展示不同来源的图标。

@iconify/iconify

@iconify/iconify是Iconify的主要库，它提供了一个统一的API，可以用来访问来自150+图标集的超过200,000个图标。它支持各种图标格式，如SVG、PNG等，并且可以在线或离线使用。

@iconify/vue

@iconify/vue是一个为Vue.js提供的特定组件库，它基于@iconify/iconify，并提供了与Vue.js集成的API。它提供了一个名为Icon的组件，你可以在你的Vue模板中使用这个组件来展示图标。

@iconify/vue还允许你通过Icon组件的其他属性来定制图标的样式，如颜色、大小
主网站
文档和教程
搜索图标：在 Iconify 网站上，你可以通过搜索或浏览来查找和选择所需的图标。

npm install @iconify/vue @iconify/iconify

<template>
  <Icon icon="ant-design:search" />
</template>

<script>
import { Icon } from '@iconify/vue'

export default {
  components: {
    Icon
  }
}
</script>

vite-plugin-url-copy 静态资源或文件从源路径复制到目标路径 打包

vite-plugin-url-copy 是一个 Vite 插件，它允许你将静态资源或文件从源路径复制到目标路径。这个插件可能在你想在打包时复制某些静态文件或资源到特定目录时非常有用。

npm install vite-plugin-url-copy

import { defineConfig } from 'vite'
import urlCopy from 'vite-plugin-url-copy'

export default defineConfig({
  plugins: [
    urlCopy({
      targets: [
        { src: 'src/assets/my-image.png', dest: 'dist/assets/my-image.png' },
        { src: 'src/some-file.txt', dest: 'dist/some-directory/some-file.txt' },
      ],
    }),
  ],
})

vite-plugin-svg-icons 直接使用本地的 SVG 文件

vite-plugin-svg-icons 是一个 Vite 插件，它的主要功能是将本地的 SVG 文件转换为可在 Vue 组件中直接使用的图标。这个插件可以自动扫描指定目录下的 SVG 文件，并将其注册为 Vue 组件，从而简化了在 Vue 项目中使用 SVG 图标的过程。

symbolId 是用来生成 SVG 图标的唯一标识符的格式。在插件配置中，你可以自定义 symbolId 的生成规则。例如，如果你的 SVG 文件名是 home.svg，那么它的 symbolId 将会是 icon-home。

npm install vite-plugin-svg-icons --save-dev

// vite.config.js 
import { defineConfig } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/icons')],
      // 指定symbolId格式
      symbolId: 'icon-[name]',
    }),
  ],
})
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import 'virtual:svg-icons-register' // 引入 SVG 注册脚本

createApp(App).mount('#app')

<template>
  <div>
    <svg-icon icon-class="home" />
  </div>
</template>

vite-plugin-style-import 按需导入组件库的样式

vite-plugin-style-import 是一个 Vite 插件，用于按需导入组件库的样式。这个插件的主要目的是解决在 Vite 项目中，当使用诸如 Element Plus、Ant Design Vue 等组件库时，样式文件通常需要手动引入的问题。vite-plugin-style-import 能够自动处理样式文件的引入，使得开发者可以更专注于业务逻辑的实现，而无需手动添加样式文件的导入。

npm install vite-plugin-style-import --save-dev
// 配置插件
import { defineConfig } from 'vite'
import { createStyleImportPlugin, AntDesignVueResolve, VantResolve, ElementPlusResolve } from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    createStyleImportPlugin({
      resolves: [
        AntDesignVueResolve(),
        VantResolve(),
        ElementPlusResolve(),
      ],
    }),
  ],
})
//使用插件
<template>
  <el-button type="primary">Primary Button</el-button>
</template>
<script setup>
import { ElButton } from 'element-plus';
</script>

vite-plugin-purge-icons 按需加载 SVG 图标 优化性能

vite-plugin-purge-icons 是一个 Vite 插件，用于按需加载 SVG 图标。它类似于 TailwindCSS + PurgeCSS 的功能，但专门作用于图标。该插件通过分析源代码或打包后的文件，提取出你使用的图标名称，然后将这些需要的图标数据（SVG）打包到你的代码中，减少了不必要的带宽和额外的未使用的图标，从而优化了加载性能。
配合 @iconify/json使用

npm install vite-plugin-purge-icons --save-dev

import { defineConfig } from 'vite'
import PurgeIcons from 'vite-plugin-purge-icons'

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

@iconify/json 储和管理图标的 JSON 文件

@iconify/json 是一个用于存储和管理图标的 JSON 文件。它是 iconify 系统的一部分，iconify 是一个用于自定义和嵌入图标的开源 JavaScript 库。@iconify 允许开发者使用 JSON 文件来存储图标数据，并将其嵌入到网页或应用程序中。
配合 @iconify/iconify 使用

npm install @iconify/json @iconify/iconify --save-dev

{
  "fa-solid:home": {
    "source": "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/fonts/fontawesome-solid.woff2",
    "weight": "normal",
    "style": "normal"
  }
}

<div class="iconify" data-icon="fa-solid:home"></div>

import 'iconify/dist/iconify.min.js';
import '@iconify/iconify/dist/iconify.css';
import '@iconify/json/dist/iconify-json.min.js';
import './icons.json';

@iconify/json、vite-plugin-purge-icons 和 vite-plugin-svg-icons 配合使用

@iconify/json、vite-plugin-purge-icons 和 vite-plugin-svg-icons 都可以用于图标管理，但它们的功能和使用方式有所不同。

@iconify/json 是一个用于存储和管理图标的 JSON 文件。它主要用于存储图标数据，并可以通过 iconify 系统在网页或应用程序中嵌入这些图标。

vite-plugin-purge-icons 是一个 Vite 插件，用于按需加载 SVG 图标。它会分析源代码或打包后的文件，提取出使用的图标名称，然后只打包你实际使用的图标，从而减少不必要的带宽和未使用的图标。

vite-plugin-svg-icons 是一个 Vite 插件，用于将本地 SVG 文件转换为可直接在 Vue 组件中使用的图标。这个插件可以自动扫描指定目录下的 SVG 文件，并将其注册为 Vue 组件。

这三个工具可以配合使用，以实现更好的图标管理。你可以使用 @iconify/json 来存储和管理你的图标数据，然后使用 vite-plugin-purge-icons 来按需加载和优化这些图标，同时可以使用 vite-plugin-svg-icons 来方便地在你的 Vue 组件中使用 SVG 图标。

具体来说，你可以将你的 SVG 图标存储在一个目录中，并使用 vite-plugin-svg-icons 插件将其注册为 Vue 组件。然后，你可以使用 @iconify/json 来管理这些图标的数据，并使用 vite-plugin-purge-icons 来优化你的构建，只包含你实际使用的图标。

npm install @iconify/json @iconify/iconify vite-plugin-svg-icons --save-dev
// 创建 @iconify/json 文件：
{
  "fa-solid:home": {
    "source": "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/fonts/fontawesome-solid.woff2",
    "weight": "normal",
    "style": "normal"
  }
}
// 配置 Vite 插件
import { defineConfig } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      iconDirs: ['./src/icons'], // 指定 SVG 图标存放的目录路径
      symbolId: 'icon-[dir]-[name]', // 图标 symbol 的 id 模式
    }),
  ],
})
// 使用图标
<div class="iconify" data-icon="fa-solid:home"></div>
// 注册图标
import { createApp } from 'vue'
import App from './App.vue'
import '@iconify/iconify'
import '@iconify/json'

createApp(App).mount('#app')

vite-plugin-progress 显示构建进度条

progress 通常指的是一个用于显示构建进度的插件，如 vite-plugin-progress。这个插件在 Vite 构建过程中显示进度条，帮助开发者更直观地了解构建进度，从而提升开发体验。

npm install vite-plugin-progress --save-dev

import { defineConfig } from 'vite'
import progressPlugin from 'vite-plugin-progress'

export default defineConfig({
  plugins: [
    progressPlugin()
  ]
})

vite-plugin-mock 拦截请求 mockjs生成模拟数据返回

vite-plugin-mock 是一个专为 Vite 设计的插件，用于在本地开发环境中创建 API 的 mock 数据。它基于 mockjs 或者自定义的 mock 数据逻辑，让开发者在后端 API 未准备好之前就能模拟出类似的数据响应，从而保证前端开发的顺利进行。

npm install vite-plugin-mock --save-dev

import { defineConfig } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
    viteMockServe({
      mockPath: 'mock', // mock 文件夹的路径
      localEnabled: true, // 开启本地 mock
    })
  ]
})

export default {
  url: '/api/getUserList',
  method: 'get',
  response: () => {
    return {
      code: 0,
      message: 'success',
      data: [
        { id: 1, name: 'John Doe', age: 25 },
        { id: 2, name: 'Jane Doe', age: 24 },
      ],
    };
  },
};

mockjs 生成模拟数据

Mock.js 可以快速生成模拟数据，方便前端进行开发和测试。
Mock.js 官方网站
Mock.js 教程和示例
字符串（@string）
@cname 随机的中文姓名
@string(length)：生成指定长度的随机字符串。
@cstring(length)：生成指定长度的随机中文字符串。
@word(min, max)：生成指定范围内的随机汉字。
@sentence(min, max)：生成指定范围内的随机句子。
@csentence(min, max)：生成指定范围内的随机中文句子。
数字（@integer 和 @float）
@integer(min, max)：生成指定范围内的随机整数。
@float(min, max, dmin, dmax)：生成指定范围内的随机浮点数，其中 dmin 和 dmax 是小数部分的位数。
金额（@money）
@money(min, max, dmin, dmax)：生成指定范围内的随机金额，可以是整数或浮点数。
图片（@image）
@image(width, height, background, foreground, format, text)：生成指定大小、背景色、前景色、格式和文本的随机图片。
日期（@date 和 @datetime）
@date(format)：生成随机日期。
@datetime(format)：生成随机日期和时间。
电话（@phone）
@phone：生成随机电话号码。
邮箱（@email）
@email：生成随机邮箱地址。

npm install mockjs --save-dev

// mock.js
import Mock from 'mockjs';

Mock.mock('/api/users', 'get', {
  'list|1-10': [
    {
      'id|1-100': 1,
      'name': '@cname',
      'age|1-100': 20,
      'email': '@email'
    }
  ]
});

// 在 main.js 或其他合适的入口文件中
import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';
import './mock.js'; // 引入 mock.js

Vue.prototype.$axios = axios; // 将 axios 绑定到 Vue 的原型上，方便在组件中调用

new Vue({
  render: h => h(App),
}).$mount('#app');

<template>
  <div>
    <button @click="fetchUsers">Fetch Users</button>
  </div>
</template>

<script>
export default {
  methods: {
    fetchUsers() {
      this.$axios.get('/api/users')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}
</script>
// 用法示例
Mock.mock('/api/users', 'get', {
  'list|1-10': [
    {
      'id|1-100': 1,
      'name': '@cname',
      'age|1-100': 20,
      'email': '@email'
    }
  ]
});
Mock.mock({
            // 用户名
            username: '@cname',
            // 账号
            account: '@first',
            // 邮箱
            email: '@EMAIL',
            // 创建时间
            createTime: '@datetime',
            // 用户id
            id: toAnyString()
          })
console.log(Mock.Random.integer(1, 100));  // 生成 1 到 100 之间的随机整数
console.log(Mock.Random.float(1, 100, 2, 4));  // 生成 1 到 100 之间的浮点数，小数部分有 2 到 4 位
console.log(Mock.Random.date());  // 生成随机日期
console.log(Mock.Random.time());  // 生成随机时间
console.log(Mock.Random.color());  // 生成随机颜色
console.log(Mock.Random.email());  // 生成随机邮箱地址

Mock.Random.extend({
  phone: function() {
    return Mock.Random.integer(13000000000, 18000000000) + '';
  }
});

console.log(Mock.Random.phone());  // 生成随机手机号码

Mock.setup({
  timeout: '300-500'
});

// 设置 300 到 500 毫秒的随机响应时间

const schema = {
  'name': '@cname',
  'age|1-100': 1,
  'email': '@email'
};

const data = {
  name: '张三',
  age: 25,
  email: 'zhangsan@example.com'
};

if (Mock.validate(data, schema)) {
  console.log('数据验证通过');
} else {
  console.log('数据验证失败');
}

unocss 全局配置样式等信息

unocss 是一个高效的原子 CSS 引擎，它提供了一种现代化的方式来管理和应用样式，通过其轻量化、模块化和可扩展的特性，显著提升了项目的开发效率和性能表现。

@unocss/transformer-variant-group 是 UnoCSS 框架的一个扩展，它们之间存在依赖关系
unocss官网
tailwindcss文档
windicss文档
图标库1
图标库2unocss预设支持

vue2
npm install @unocss/webpack unocss --save-dev

npm install unocss @unocss/transformer-variant-group --save-dev

// vue 2  vue.config.js
const UnoCSS = require('@unocss/webpack').default;

module.exports = {
  configureWebpack: {
    plugins: [
      new UnoCSS()
    ]
  },
  // ...其他配置
};

import UnoCSS from 'unocss/vite'
 plugins: [
      UnoCSS()
    ]
 // 根目录新建 uno.config.js 自定义配置
 import { defineConfig, presetAttributify, presetUno } from 'unocss';
 export default defineConfig({
  presets: [presetAttributify(), presetUno()], //  预设配置。你可以添加一些内置的预设
  shortcuts: [// 类名快捷方式
    'btn': 'px-4 py-2 rounded-md text-white bg-blue-500 hover:bg-blue-700 focus:outline-none',
    'dark': 'bg-black text-white',
  ],
  rules：[// 自定义规则
  // bg-50  控制元素的背景颜色的透明度
    [/.*(--)?bg-(\d+)/, (_, { $2 }) => ({
      'background-color': `rgba(255, 215, 0, ${+$2 / 10})`
    })],
        [ // 匹配overflow-ellipsis 赋值 text-overflow: ellipsis;
      /^overflow-ellipsis$/,
      ([], { rawSelector }) => {
        const selector = e(rawSelector)
        return `
${selector} {
  text-overflow: ellipsis;
}
`
      }
    ],
  ],
  transformers: [transformerVariantGroup()],//转换器
  ignore: [//忽略模式
    'node_modules',
    'public',
    // 其他路径
  ],
});

Terser

Terser 是一个流行的 JavaScript 解析器、压缩器、美化器和转译器工具。它主要用于压缩 JavaScript 代码，以减小文件大小，从而提高网页加载速度。Terser 支持最新的 JavaScript 语法，并且可以处理 ES6+ 代码。
前端开发：在前端项目中，为了减少 HTTP 请求的大小，通常会使用 Terser 来压缩 JavaScript 文件。
库和框架开发：开源库和框架的作者通常会使用 Terser 来压缩和发布他们的代码，以优化性能。
构建工具集成：许多现代前端构建工具（如 Webpack、Rollup 和 Gulp）都支持与 Terser 集成，以自动压缩 JavaScript 文件。
代码混淆：虽然 Terser 主要用于压缩，但它也可以在一定程度上混淆代码，增加代码阅读的难度。

npm install terser-webpack-plugin -D

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    mode: 'production',
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin()],
    },
};

Rollup 优化模块打包工具

Rollup 是一个 JavaScript 模块打包工具，它将多个模块打包成一个或多个 bundle（包）。Rollup 的主要特点是使用 ES6 模块（import 和 export）作为标准，并且能够生成非常小巧的 bundle。这使得 Rollup 成为构建现代 JavaScript 库和应用的理想选择。

场景
库和框架开发：Rollup 非常适合用于构建和打包 JavaScript 库和框架。它可以将库的各个模块打包成一个文件，从而简化发布和使用的流程。
前端应用开发：Rollup 也可以用于构建前端应用。通过配置适当的插件，你可以使用 Rollup 来处理 CSS、图片等资源，并最终生成用于生产环境的 bundle。
代码拆分：Rollup 支持代码拆分（Code Splitting），可以将应用拆分成多个 bundle，从而实现按需加载，提高应用的加载速度和性能。
树摇（Tree Shaking）：Rollup 支持树摇功能，可以移除未使用的代码，进一步减小 bundle 的大小。

"rollup": "^4.18.1",
"rollup-plugin-visualizer": "^5.12.0",

import { visualizer } from 'rollup-plugin-visualizer'

build: {
      rollupOptions: {
        plugins: env.VITE_USE_BUNDLE_ANALYZER === 'true' ? [visualizer()] : undefined
        }
  }

rimraf 清理和删除文件目录

rimraf 在 Vue 项目中同样非常有用，主要用于清理和删除不需要的文件或目录。以下是一些常见的使用场景和具体的使用方法。

场景
清理构建目录：在每次构建之前，通常需要清理之前的构建输出目录（如 dist 或 build 目录）。这样可以确保构建输出中没有旧的或残留的文件。
删除临时文件：在开发过程中，可能会生成一些临时文件或目录（如编译过程中的缓存文件）。使用 rimraf 可以方便地删除这些临时文件。
自定义构建脚本：在编写自定义的构建脚本或自动化脚本时，rimraf 可以用于删除不需要的文件或目录。

npm install rimraf -D

"build": "rimraf dist && vue-cli-service build"

prettier 代码格式化工具

Prettier 是一个流行的代码格式化工具，它支持多种编程语言和文件格式，包括 JavaScript、TypeScript、CSS、HTML、Vue 等。Prettier 的目标是自动格式化代码，以确保代码风格的一致性，从而提高代码的可读性和维护性。

场景
代码风格一致性：在团队开发中，使用 Prettier 可以确保所有开发者的代码风格一致，避免因个人习惯导致的代码风格差异。
自动格式化：在编写代码时，Prettier 可以自动格式化代码，减少手动格式化的工作量。
代码审查：在代码审查过程中，Prettier 可以帮助快速识别和修复代码格式问题，从而提高代码质量。
持续集成：在持续集成/持续部署（CI/CD）流程中，可以使用 Prettier 来检查代码格式，确保所有提交的代码都符合预定的代码风格.

npm install prettier -D

// 创建一个 .prettierrc 文件来配置 Prettier 的规则
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}
semi：是否在语句末尾添加分号。
singleQuote：是否使用单引号。
tabWidth：缩进宽度。
useTabs：是否使用制表符进行缩进。
trailingComma：是否在多行结构的末尾添加逗号。
bracketSpacing：是否在对象字面量的括号之间添加空格。
arrowParens：箭头函数的参数是否总是加括号。
// 通过命令行运行 Prettier 来格式化文件 格式化 src 目录下的所有 .vue 文件。
npx prettier --write src/**/*.vue

postcss 构建过程 转换和优化 CSS 代码

PostCSS 是一个用 JavaScript 工具和插件转换 CSS 代码的工具。它允许你使用 JavaScript 插件来预处理 CSS，添加浏览器前缀，转换现代 CSS 语法等。主要用于在构建过程中转换和优化 CSS 代码

使用场景
自动添加浏览器前缀：使用 autoprefixer 插件自动为 CSS 规则添加浏览器前缀。
CSS 语法转换：使用 postcss-preset-env 插件将现代 CSS 语法转换为广泛支持的 CSS 语法。
CSS 代码优化：使用 cssnano 插件优化和压缩 CSS 代码。
自定义插件开发：开发自定义的 PostCSS 插件，实现特定的 CSS 转换和优化逻辑。

npm install postcss autoprefixer postcss-preset-env cssnano -D

创建一个 postcss.config.js 配置文件：
module.exports = {
  plugins: [
    require('postcss-less'), // 如果你的项目使用Less，你需要这个插件
    require('autoprefixer'),
    require('cssnano')
    require('postcss-html') // 如果你需要在HTML中处理CSS，你需要这个插件
  ]
};

module.exports = {
  plugins: [
  require('postcss-html'),
    require('autoprefixer'),
    require('postcss-preset-env')({
      browsers: 'last 2 versions',
    }),
    require('cssnano')({
      preset: 'default',
    }),
  ],
};

package.json
"browserslist": [
   "last 2 version",
   "> 1%",
   "ie >= 8"
]
module.exports = {
  plugins: [
    require("postcss-cssnext"),
    require("postcss-import"),
    require('autoprefixer'),
  ],
};

cssnano 优化和压缩CSS 提高性能

CSSNano是一款专门用于优化和压缩CSS文件的PostCSS插件。它可以帮助开发者减少CSS文件的大小，提高加载速度，节省带宽，同时还可以优化CSS代码，例如合并相同的规则，减少代码重复。

CSSNano通常与其他PostCSS插件结合使用，如Autoprefixer，以确保CSS在被压缩之前先经过自动前缀处理，从而实现最佳的兼容性和性能。

npm install cssnano --save-dev

//postcss.config.js文件
module.exports = {
  plugins: [
    require('cssnano')({
      preset: 'advanced'
    })
  ]
}

Autoprefixer

Autoprefixer是一个基于规则的CSS处理器，利用PostCSS解析库和Browserslist数据源，自动为CSS添加浏览器前缀。它简化前端开发流程，提高代码整洁度，适用于Webpack、Gulp等构建工具

npm install autoprefixer --save-dev
//postcss.config.js文件
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  }
};

module.exports = {
  plugins: [
    require('autoprefixer')({
      // 浏览器支持范围
      browsers: ['last 2 versions', 'ie >= 8']
    })
    require('cssnano')({
      preset: 'default'
    })
  ]
};

chalk 终端中生成彩色文本

chalk 是一个流行的 JavaScript 库，用于在命令行或终端中生成彩色文本。虽然 chalk 本身与 Vue.js 无关，但它可以与 Vue.js 项目集成，以在命令行输出中提供彩色文本。

npm install chalk

import chalk from 'chalk';
red, green, blue, yellow, magenta, cyan, white
console.log(chalk.green('这是一条绿色的消息!'));
onsole.log(chalk.blue('这是一条蓝色的消息!'));
chalk.hexColor('#ff0000')('这是一个自定义的红色文本')// 自定义颜色 
console.log(chalk.bgRed('这是一个红色背景的文本'));// 背景
// chalk 支持在文本上添加样式，如 bold, italic, underline 等。
console.log(chalk.bold('这是一个粗体文本'));
console.log(chalk.italic('这是一个斜体文本'));
console.log(chalk.underline('这是一个下划线文本'));
// 组合样式和颜色：你可以组合使用样式和颜色。
console.log(chalk.green.bold('这是一个绿色且粗体的文本'));
console.log(chalk.blue.italic.underline('这是一个蓝色斜体且下划线的文本'));
//创建颜色别名：你可以创建自己的颜色别名，并在整个程序中重复使用
const myColor = chalk.hexColor('#ff0000');
console.log(myColor('这是一个自定义的红色文本'));

consola 日志记录器

consola 是一个用于 Node.js 和浏览器的优雅控制台记录器。它可以帮助开发者更方便、更高效地记录和输出日志信息。consola 提供了丰富的日志级别、自定义报告者（Reporter）和标签（Tag）等功能，使得日志管理更加灵活和高效。

npm install consola

import consola from 'consola';

consola.info('这是一条 info 级别的日志信息');
consola.warn('这是一条 warn 级别的日志信息');
consola.error('这是一条 error 级别的日志信息');
你可以通过设置环境变量 CONSOLA_LEVEL 来控制 consola 的日志输出级别。例如，如果你想关闭所有日志输出，可以将 CONSOLA_LEVEL 设置为 -1。
export CONSOLA_LEVEL=-1

esno 加载和执行 TypeScript 和 ESM 模块

esno 是一个基于 esbuild 的 Node.js 运行时，它增强了 Node.js 的能力，可以直接加载和执行 TypeScript 和 ESM 模块。esno 旨在提供一个快速、轻量级的执行环境，特别适用于在开发过程中直接运行 TypeScript 脚本。

npm install esno
"scripts": {
  "start": "esno ./src/main.ts"
}

husky Git Hooks 工具 Git 事件发生时自动运行脚本

husky 是一个 Git Hooks 工具，它允许开发者在 Git 事件发生时自动运行脚本。Git Hooks 是一种机制，它允许在 Git 执行操作时自动运行特定脚本，以执行自定义操作。husky 支持多种 Git Hooks，包括 pre-commit、pre-push 等，并可以配置多个钩子，以便在多个 Git 事件发生时执行自定义脚本。

npm install husky
配置 pre-commit 钩子：在 .husky 文件夹下的 pre-commit 文件中，你可以添加在提交代码之前需要运行的命令。例如，你可能希望运行 ESLint 或 Prettier 进行代码检查。
npx husky add .husky/pre-commit "npx eslint --fix ."
除了 pre-commit，husky 还支持其他 Git Hooks，如 pre-push、post-commit 等。你可以根据需要添加自定义的钩子。

lint-staged Git 暂存区的文件上运行指定的 lint 工

lint-staged 是一个工具，可以在 Git 暂存区的文件上运行指定的 lint 工具，以便于仅在需要时执行 lint 检查。它通常与 Husky 配合使用，以在提交代码前运行 lint-staged。使用 lint-staged 可以大大提高 lint 检查的效率，因为只需要针对本次提交的文件执行 lint 检查，而不是所有的文件。

npm install lint-staged --save-dev
package.json
"lint-staged": {
  "*.{js,jsx,ts,tsx,vue}": [
    "eslint --fix",
    "prettier --write"
  ]
}
修改 pre-commit 钩子：在 .husky 文件夹下的 pre-commit 文件中，将 npm test 修改为 npx lint-staged。
npx husky add .husky/pre-commit "npx lint-staged"

plop

plop 是一个用于生成代码文件的可配置的脚手架工具。它可以帮助开发人员自动创建代码文件、模板和代码片段，从而提高开发效率。plop 的工作原理是通过定义称为“生成器”（generators）的脚本来生成代码文件。每个生成器定义了一组操作和模板，用于生成特定类型的文件或代码片段。当你运行 plop 命令时，它会根据你的选择执行相应的生成器，并根据模板和操作的定义创建文件

npm install plop --save-dev
待学习

@commitlint/cli 校验 Git 提交信息是否符合特定的格式规范

@commitlint/cli 是一个用于校验 Git 提交信息的命令行工具，它通常与 Husky 和 lint-staged 配合使用，以在提交代码前对提交信息进行校验，从而确保提交信息的格式和内容符合项目规范和约定。@commitlint/cli 遵循Conventional Commits规范，并允许开发者自定义配置校验规则。

npm install --save-dev @commitlint/cli
配置校验规则：在项目的根目录下创建一个.commitlintrc.js文件，用于配置校验规则。可以使用默认配置或自定义配置。
module.exports = {
  extends: ['@commitlint/config-recommended'],
  rules: {
    'header-max-length': [2, 'always', 72],
    'body-max-line-length': [1, 'always', 80],
    'footer-max-line-length': [1, 'always', 80],
    'type-enum': [2, 'always', ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'chore', 'revert']],
    'type-case': [2, 'always', 'lower-case'],
    'scope-case': [2, 'always', 'lower-case'],
    'subject-case': [2, 'always', 'sentence-case'],
    'subject-full-stop': [2, 'always', '.'],
    'subject-empty': [2, 'never'],
    'subject-max-length': [2, 'always', 72],
    'type-empty': [2, 'never']
  }
};
在pre-commit钩子中集成@commitlint/cli：使用Husky的pre-commit钩子，在提交代码前运行@commitlint/cli进行校验。
npx husky add .husky/pre-commit "npx --no-install commitlint --edit $1"
运行校验：当执行git commit命令时，会自动运行@commitlint/cli进行提交信息校验。如果提交信息不符合校验规则，@commitlint/cli将显示错误信息，阻止提交。

@commitlint/config-conventional 用于定义和提供 commit 信息的格式规范

@commitlint/config-conventional 是一个用于校验 Git 提交信息格式的配置文件，它遵循了 Angular 风格的常规提交信息格式。这个配置提供了一个标准，让团队成员遵循一致的提交信息格式，从而提高代码质量和可维护性。

在Vue环境中使用@commitlint/config-conventional

在Vue项目中，使用@commitlint/config-conventional的主要目的是确保提交信息的格式和内容符合项目规范，提高协作开发的效率和代码质量。以下是使用@commitlint/config-conventional的基本步骤：

npm install @commitlint/config-conventional @commitlint/cli --save-dev

在项目根目录下创建一个.commitlintrc.js文件，配置@commitlint/config-conventional。
module.exports = {
  extends: ['@commitlint/config-conventional']
};
配置husky：使用Husky的pre-commit钩子，在提交代码前运行@commitlint/cli进行校验。
npx husky add .husky/pre-commit "npx --no-install commitlint --edit $1"

@commitlint/config-conventional 和 @commitlint/cl

@commitlint/config-conventional 和 @commitlint/cli 的作用并不完全相同，尽管它们都与 commitlint 相关，但服务于不同的目的。

@commitlint/config-conventional:

这是一个 commitlint 的配置文件，用于定义和提供 commit 信息的格式规范。
它遵循了常规的 commit 信息格式，如 Angular 的提交规范，该规范通常包含三个部分：类型、描述和可选的范围、问题和引用。
这个配置允许你定义提交信息中应该包含哪些内容，以及这些内容应该如何格式化。
@commitlint/cli:

这是一个命令行工具，用于校验 Git 提交信息是否符合特定的格式规范。
当你在本地运行 git commit 命令时，它可以检查你的提交信息是否符合你在 .commitlintrc 文件中定义的规则。
如果提交信息不符合规则，@commitlint/cli 会显示错误，阻止提交。
简单地说，@commitlint/config-conventional 提供了规范，而 @commitlint/cli 用于确保提交信息符合这些规范。它们通常一起使用，以确保团队遵循一致的提交信息格式

@iconify/json 图标库文件格式

@iconify/json 是一个提供图标数据的 JSON 格式文件。它通常用于与 iconify 结合使用，iconify 是一个用于在网页上加载和使用图标的库。@iconify/json 提供了图标数据的标准格式，使得用户可以轻松地在项目中导入和使用图标。

npm install @iconify/json
import { icon } from '@iconify/json/path/to/icon.json';

@unocss/transformer-variant-group

@unocss/transformer-variant-group 是 UnoCSS 的一个变换器插件。它允许你通过定义一系列的变换规则来将一组相关的类名转换为另一个类名，从而达到合并或简化类名的目的。这对于在组件或组件的不同状态下重用相同的样式非常有用。

npm install unocss --save-dev
在项目的根目录下创建一个 uno.config.js 或 uno.config.ts 文件，并引入必要的模块。
import {
  defineConfig,
  transformerVariantGroup,
  presetUno,
  // ... 其他你需要的预设和插件
} from 'unocss';

export default defineConfig({
  presets: [presetUno()],
  transformers: [transformerVariantGroup()],
  // ... 其他配置
});
在 uno.config.js 或 uno.config.ts 文件中，你可以定义自己的变体组规则。例如：
transformers: [
  transformerVariantGroup({
    'active': ['is-active', 'is-selected'],
    'hover': ['is-hover', 'is-over']
  })
]
上面的配置将 'active' 转换为 'is-active' 和 'is-selected'，将 'hover' 转换为 'is-hover' 和 'is-over'。
在你的 Vue 组件中，你可以使用这些变体组来简化你的类名，例如：
<button class="btn active hover">Click me</button>
<button class="btn is-active is-selected is-hover is-over">Click me</button>