vue3 中好用的插件
1.Api 自动导入
unplugin-auto-import自动引入 composition api，不需要再手动引入。（npm 地址）
- 下载
npm i -D unplugin-auto-import
- 配置
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插件可以优雅的解决这个问题
- 安装
npm i vite-plugin-vue-setup-extend -D
- 配置 vite.config.ts
import { defineConfig } from "vite";
import VueSetupExtend from "vite-plugin-vue-setup-extend";
export default defineConfig({
plugins: [VueSetupExtend()],
});
- 使用
<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.自动导入图片
爽归爽，但容易发生变量冲突，慎用！
自动导入图像，同级目录的文件名不能重复！（官网地址）
- 安装
npm i vite-plugin-vue-images -D
- 配置 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。
}),
],
};
- 使用
<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>
4.组件自动按需导入
- 安装
npm i unplugin-vue-components -D
- 配置 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,
}),
],
}),
],
})