如何将Vite项目中引入的Vue3插件unplugin-auto-import配置为自动导入？

本文共计287个文字，预计阅读时间需要2分钟。

自动引入 + composition api，无需手动引入。GitHub 地址：[https://github.com/antfu/unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)

下载 npm:bashnpm i -D unplugin-auto-import

修改 vite.config.ts 文件：javascriptimport { defineConfig } from 'vite';import AutoImport from 'unplugin-auto-import/vite';

export default defineConfig({ plugins: [ AutoImport() ]});

自动引入 composition api，不需要再手动引入。
github地址：github.com/antfu/unplugin-auto-import

下载

npm i unplugin-auto-import -D

修改vite.config.ts文件

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

配置完毕后保存，此时会自动生成一个 auto-import.d.ts 的文件

现在我们可以在项目中写入代码， 可以看到我们没有手动引入 ref 也可以在项目中正常使用。

<template> <div> <button @click="flag = !flag">change flag</button> <div>{{ flag }}</div> </div> </template> <script setup lang="ts"> const flag = ref(false); </script> <style lang="less"></style>

到此这篇关于vue3+vite引入插件unplugin-auto-import的文章就介绍到这了,更多相关vue3引入插件unplugin-auto-import内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！