vue3中超好用的插件整理

npm i -D unplugin-auto-import

import AutoImport from "unplugin-auto-import/vite";
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      /* options */
      imports: ["vue"],
      dts: "src/auto-import.d.ts",
    }),
  ],
});

 AutoImport({
      // 在哪些文件里可以直接引入
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/, // .md
      ],
      // 自动引入哪些包
      imports: [
        // 自动引入整个模块
        "vue",
        "vue-router",
        //  自定义模块引入，比如只需要自动引入某个东西，给引入的模块起别名
        {
          "@vueuse/core": [
            // 按需导出的模块
            "useMouse", // import { useMouse } from '@vueuse/core',
            // 导出别名
            ["useFetch", "useMyFetch"], // import { useFetch as useMyFetch } from '@vueuse/core',
          ],
          axios: [
            //  默认导出
            ["default", "axios"], // import { default as axios } from 'axios',
          ],
        },
      ],
      // 声明文件
      dts: "./auto-imports.d.ts",
      resolvers: [
        /* ... */
      ],
        // 生成相应的.eslintrc-auto-import.json文件。
        // eslint globals文档 - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
      eslintrc: {
        enabled: false, // Default `false`
        filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
        globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
      },
    }),

npm i vite-plugin-vue-setup-extend -D

import { defineConfig } from "vite";
import VueSetupExtend from "vite-plugin-vue-setup-extend";
export default defineConfig({
  plugins: [VueSetupExtend()],
});

<script lang="ts" setup name="demo"></script>

<script lang="ts" setup name="demo">
  // test
</script>

npm i vite-plugin-vue-images -D

import { defineConfig } from "vite";
import ViteImages from "vite-plugin-vue-images";

export default {
  plugins: [
    Vue(),
    ViteImages({
      dirs: ["src/assets"], // 图像目录的相对路径
      extensions: ["jpg", "jpeg", "png", "svg", "webp"], // 有效的图像扩展
      customResolvers: [], // 覆盖名称->图像路径解析的默认行为
      customSearchRegex: "([a-zA-Z0-9]+)", // 重写搜索要替换的变量的Regex。
    }),
  ],
};

<template>
  <img :src="Image1" />
</template>

<script setup lang="ts"></script>

<template>
  <img :src="Image1" />
</template>

<script setup lang="ts">
import Image1 from "@/assets/Image1.png";
</script>

npm i unplugin-vue-components -D

import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite' // 按需加载自定义组件
// ui库解析器，也可以自定义，需要安装相关UI库，unplugin-vue-components/resolvers
// 提供了以下集中解析器，使用的时候，需要安装对应的UI库，这里以AntDesign示例
// 注释的是包含的其他一些常用组件库，供参考
import {
  // ElementPlusResolver,
  AntDesignVueResolver,
  // VantResolver,
  // HeadlessUiResolver,
  // ElementUiResolver
} from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [
    // 按需引入
    Components({
      dts: true,
      dirs: ['src/components'], // 按需加载的文件夹
      extensions: ['vue', 'jsx'], // 文件类型
      // ui库解析器，也可以自定义，需要安装相关UI库
      resolvers: [
        //  VantResolver(),
        // ElementPlusResolver(),
        // AntDesignVueResolver(),
        // HeadlessUiResolver(),
        // ElementUiResolver()
        AntDesignVueResolver({
          // 参数配置可参考：https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/antdv.ts
          // 自动引入 ant-design/icons-vue中的图标，需要安装@ant-design/icons-vue
          resolveIcons: true,
        }),
      ],
    }),
  ],
})