unplugin-auto-import && unplugin-vue-components 的使用

unplugin-auto-import

使用前提

在进行项目时经常要导入重复性的 api，例如下面这段代码

import { ref, onMounted } from 'vue'

这类引入的 api 重要但是太繁琐，有时候忘记引入还会报错，所以找到了一个插件去解决这个问题

使用描述

unplugin-auto-import 这个插件可以实现依赖的自动导入，不再频繁导入依赖，从而提高开发效率

同时这个插件不同以往的专门对 vite 使用的插件，这个插件是所有项目都可以下载并且使用

安装配置

npm i unplugin-auto-import -D

安装完成之后在 vite.config.ts 中配置

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
	plugins: [
		AutoImport({
			imports: [
				'vue', // 自动导入 vue 中的语法
				{
					'naive-ui': [ // 导入 naive-ui 中的部分语法
						'useDialog',
						'useMessage',
			            'useNotification',
			            'useLoadingBar'
					]
				}
			]
		})
	]
})

可以在 imports 中 配置多个自动导入对象

配置完成之后即可直接在文件中使用语法而不需要导入依赖库

const count = ref(0)

unplugin-vue-components

使用前提

在项目中经常需要导入 ui 库的组件或者一些自定义的组件，未免有些繁琐，所以和上面的自动导入 api 一样，找到了一个自动导入组件的插件

使用描述

unplugin-vue-components 这个插件可以实现组件的自动导入，不再频繁导入ui组件或者自定义组件，从而提高开发效率

同时这个插件不同以往的专门对 vite 使用的插件，这个插件是使用vue项目都可以下载并且使用

安装配置

npm i unplugin-vue-components -D

安装完之后在 vite.config.ts 中配置

// 插件内置了大多数流行库的解析器，这里拿 naive-ui 举例
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
	plugins: [
		Components({
			// 同时也可以导入自己定义的组件
			dirs: ['src/components'], // 
			resolvers: [NaiveUiResolver()], // ui库解析器 
			extensions: ['vue'], 
			dts: 'src/components.d.ts' // 配置文件生成位置 
		})
	]

})

完成之后即可在页面中无需写导入组件语法即可使用

文刊借鉴