vue3项目配置按需自动导入API组件unplugin-auto-import

已于 2024-02-19 17:40:32 修改
阅读量4.3k 收藏 18
点赞数 11
分类专栏： VUE 文章标签： 前端 vue 自动引入插件
于 2024-02-19 17:39:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/rear0312/article/details/136173815
版权
本文介绍了如何通过安装并配置unplugin-auto-import插件，自动在Vite项目中按需加载Vue和VueRouter，避免冗余的import语句，提高开发效率。作者推荐此前端神器，链接可查看其GitHub地址。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

场景应用：避免写一大堆的import，比如关于Vue和Vue Router的

1、安装unplugin-auto-import
npm i -D unplugin-auto-import

2、配置vite.config
import AutoImport from 'unplugin-auto-import/vite'//按需自动加载API插件
AutoImport({ imports: ["vue", "vue-router"] }),

3、验证

将vue、vue-router等的import语句删除，项目正常启动不报错

小Tips：

这款插件是前端大神Anthony Fu写的，非常实用

有兴趣的小伙伴可以到git上看，unplugin-auto-import的git地址icon-default.png?t=N7T8https://gitcode.com/unplugin/unplugin-auto-import/overview

理解按需自动导入 unplugin-auto-import & unplugin-vue-components
阿城的博客
12-21 6568
如果是自己开发的组件库，为了让它支持自动按需导入，就需要自己编写解析器。},],})resolvers 数组里可以传入一个函数，这个函数会在编译时不断执行。函数接收组件名，并返回一个和 unplugin-auto-import 插件中 imports 配置一样的配置对象，这个对象就是 import 语句的描述对象，最终依据它生成导入语句。注意：组件名会自动转成大驼峰写法。因此所谓的解析器，功能就是根据组件名映射成 import 导入语句。
`unplugin-auto-import` 插件的推荐与使用指南
最新发布
m0_72030584的博客
03-06 1581
本文讲解unplugin-auto-import 是一个非常实用的自动导入插件，它可以自动导入 API，让我们在编写代码时更加便捷
项目中自动引入神器 - unplugin-auto-import/unplugin-vue-components
不想起床
03-28 5481
在开发中，我们总喜欢站在巨人的肩膀上开发，比如用一些框架：vue,react,组件库：element，ant。工具函数：axios，lodash现在是模块化时代，我们也喜欢封装一些组件/工具库，但是都需要引入。v3更是改成composition API ,用那个引入那个，不知道你为此是否感到繁琐，今天就让我们来学习使用两款插件，解放双手，让我们有更多的摸鱼时间🦑。
unplugin-auto-import，Vue3自动引入api插件
liuwenjie_的博客
10-14 2226
Vue3自动引入api、Vue3插件
【vue3】使用unplugin-auto-import自动导入模块
IU
06-28 3280
模块化已经是现代 Web 开发必不可少的开发方式，频繁引入依赖包是一个常见的操作。但是，手动引入依赖包往往繁琐，尤其是当依赖包数量较多时，会显著降低开发效率。插件，可以帮助我们在项目中，自动导入常用的使用的第三方库的 API，就可以方便我们开发，提升开发效率。
vue3 开发利器——unplugin-auto-import
江湖行骗老中医
11-27 933
为 Vite、Webpack、Rollup 和 esbuild 按需自动导入 API。支持 TypeScript。由 unplugin 提供技术支持。每次都要写，哪怕是复制粘贴都会非常繁琐。并且每一个 下面都顶着一大坨 import，看着也十分难受。还记得 Vue 3 的组合式 API 语法吗？本文介绍的 unplugin-auto-import 就是为了解决这个问题而诞生的。刚开始写觉得没什么，但是后来渐渐发现，这玩意儿几乎每个页面都有啊！
vue3的unplugin-auto-import自动引入
weixin_52020362的博客
11-14 1万+
vue3中unplugin-auto-import自动引入
Vue3自动引入组件（unplugin-auto-import和element-plus）
m0_61998604的博客
05-09 6131
在使用 Vue3 开发项目时，我们经常需要引入多个组件，但是每次手动引入非常麻烦，容易出错。为了解决这个问题，我们可以使用 unplugin-auto-import 插件自动引入组件，提高开发效率。本篇博客将详细介绍如何在 Vue3 项目中使用 unplugin-auto-import 插件。
Vue3 自动引入 api 插件 unplugin-auto-import
qq_30193097的博客
08-23 289
以上配置完成后重启，就可以无需 import 导入，直接使用 ref、watch、reactive、computed 等 api 了。
vue3+ts+vite项目使用 unplugin-auto-import (自动导入)
halo1416的博客
03-07 3163
该项目是基于vite创建的项目;
unplugin-vue-components，unplugin-auto-import，借用ai去学习
gxdzi的博客
02-21 1153
好的，我现在需要帮助用户理解他们提供的这段Vite配置代码。用户之前已经询问过关于`ElementPlusResolver`的导入问题，现在他们展示了在`vite.config.ts`中使用该解析器的具体配置。我需要逐步分析这段代码，并解释每个部分的作用。AutoImport和Components。这两个插件都属于的一部分，或者可能来自其他unplugin插件，比如。需要确认这两个插件的来源，但根据常见的配置，AutoImport可能来自，而Components来自。
Vue3 （unplugin-auto-import自动导入的使用）
想好了再写！
02-23 2049
【代码】Vue3 （unplugin-auto-import自动导入的使用）
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
朝阳39的博客
06-27 610
是否还在为每次都需要导入框架方法而烦恼呢？用 unplugin-auto-import 来帮你吧，以后只需这样写就行啦！官方示例如下图。
【Vue3】自动引入插件-`unplugin-auto-import`
小秀的博客
08-10 2056
自动导入 api 按需为 Vite, Webpack, Rspack, Rollup 和 esbuild。支持TypeScript。由unplugin驱动。Vue3自动引入插件-最后，举例验证插件作用。
unplugin-auto-import的使用
热门推荐
我是香菜
01-04 1万+
unplugin-auto-import的使用
vue3自动导入---组件库elements-ui,vuetify以及scss样式的自动导入
I_am_shy的博客
06-21 3168
我们在使用第三方组件库和css样式文件时，都需要进行引入，可以在单个组件内单独引用，也可以在全局引入或一次引入所有组件；但是，一般情况下我们都不会全部引入，这会是打包的结果变大，而且往往是不可能用上所有的组件，这个时候就需要。可以看到可以在组件中直接使用scss变量，要注意使用scss应该在style标签上添加lang="scss"属性。vuetify也是一套ui组件，它的风格和组件的动画效果更加生动，但是vuetify的配置会相对麻烦，然后就可以在vue组件中直接使用需要的ui组件。
Vue3自动引入组件，组件库
m0_56344602的博客
05-16 1万+
在做vue3项目中时，每次使用都需要先进行引入，用ts的还好，会有爆红提示，如果是使用js开发的很多时候都会等到编译的时候才发现哪里哪里又没有引入，就会很浪费时间，偶然发现一款好用的组件可以帮助我们很好的解决这种问题。...
unplugin-auto-import 插件
一个希望世界和平的前端程序猿的博客
07-11 1554
为Vite、Webpack、Rspack、Rollup和esbuild按需自动导入API，支持TypeScript。
在vue3中配置unplugin-auto-import
12-27
### 配置 `unplugin-auto-import` 插件 为了在 Vue 3 项目中配置 `unplugin-auto-import` 插件，可以按照以下方法操作： #### 安装依赖包 首先安装必要的 npm 包。这包括 `unplugin-auto-import` 和其 Vite 或 Webpack 特定版本的适配器之一。 ```bash npm install unplugin-auto-import vite-plugin-vue @vue/compiler-sfc --save-dev ``` 对于使用 Vite 的 Vue 3 项目来说，上述命令会安装所需的工具集；如果是在其他构建环境下，则应替换相应的打包工具插件部分。 #### 修改配置文件 接着修改项目的构建配置文件（通常是 `vite.config.ts` 或者 `webpack.config.js`），加入该插件的支持并指定自动导入的内容范围。 针对 Vite 用户，在 `vite.config.ts` 中添加如下代码片段[^1]: ```typescript // vite.config.ts import { defineConfig } from &#39;vite&#39; import vue from &#39;@vitejs/plugin-vue&#39; import AutoImport from &#39;unplugin-auto-import/vite&#39; export default defineConfig({ plugins: [ vue(), AutoImport({ imports: [&#39;vue&#39;], dts: &#39;src/auto-imports.d.ts&#39;, // 可选：生成 TypeScript 声明文件的位置 }), ], }) ``` 这段脚本启用了 `AutoImport` 功能，并指定了要自动加载的对象列表以及可选项中的类型声明输出路径。 #### 使用自动生成的功能 完成以上设置之后，无需手动引入即可直接访问所列模块内的成员变量或函数。例如可以直接书写 `<script setup>` 组件而不需要显式地写入 `import { ref, reactive } from &#39;vue&#39;` 这样的语句来获取响应式的 API 接口。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序媛七分

随多随少随你心意^-^

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值