vue3 中好用的插件

1.Api 自动导入

unplugin-auto-import自动引入 composition api，不需要再手动引入。（npm 地址）

1. 下载

npm i -D unplugin-auto-import 

2. 配置 vite.config.ts

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')       },     }), 

声明文件 auto-imports.d.js 时自动生成的，可以去看看文件内容，里面会标明自动引入了哪些东西

2.setup name 增强 vite-plugin-vue-setup-extend

在使用 Vue3.2 的 setup 语法糖后，无法优雅的定义组件的 name 值，虽然 vite 会根据组件的文件名自动生成组件名，但是需要自定义的组件名时，就很不方便。
解决这个问题通常是通过写两个 script 标签来解决，一个使用 setup，一个不使用，但这样必然是不够优雅的。

安装vite-plugin-vue-setup-extend插件可以优雅的解决这个问题

1. 安装

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

2. 配置 vite.config.ts

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

3. 使用

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

在使用 vite-plugin-vue-setup-extend 0.4.0 及以前版本时，会有个问题：如果 script 标签内没有内容，即使给 script 标签添加上 name 属性，其在 vue-devtools 内也不会生效。
解决：不要让 script 标签内空着，例如：加行注释。

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

3.自动导入图片

爽归爽，但容易发生变量冲突，慎用！

自动导入图像，同级目录的文件名不能重复！（官网地址）

1. 安装

npm i vite-plugin-vue-images -D 

2. 配置 vite.config.ts

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。     }),   ], }; 

3. 使用

<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" alt="vue3 中好用的插件"; </script> 

4.组件自动按需导入

unplugin-vue-components

1. 安装

npm i unplugin-vue-components -D 

2. 配置 vite.config.ts

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,         }),       ],     }),   ], })