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

已于 2024-02-19 17:40:32 修改
阅读量3.9k 收藏 17
点赞数 11
分类专栏： VUE 文章标签： 前端 vue 自动引入插件
于 2024-02-19 17:39:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rear0312/article/details/136173815
版权

场景应用：避免写一大堆的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

菜鸟茜
关注
  • 11
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vite-plugin-components:V自动导入Vite的按需组件
03-14
按需组件自动导入Vite 用法 :information: 从v0.6.x支持Vite 2， v0.6.x支持Vite 1。 安装 npm i vite-plugin-components -D # yarn add vite-plugin-components -D 将其添加到vite.config.js // vite.config....
vue-cli-plugin-auto-routing:自动解决页面和布局路由
05-02
vue-cli-plugin-自动路由 提供自动路由功能的Vue CLI插件。 概述 确保您处于由Vue CLI> = v3生成的项目中。 您可以通过运行以下命令来安装此插件： # If you did not install router plugin yet $ vue add router # Install vue-cli-plugin-auto-routing $ vue add auto-routing 添加插件后，文件结构如下。 src/ ├── pages/ ├── layouts/ └── router/ 页数 pages/目录下的.vue文件将被自动解析以生成路由。 Vue路由器的routes选项将使用pages/下的文件结构进行配置。 生成的路由与相同。 请注意，以__ （两个下划线，例如__foo__.vue ）开头和结尾的目录和文件将被忽略。 例如，当
和满屏import说拜拜！unplugin-auto-import/vite自动引入vue相关api
有事儿私信。
05-30 738
unplugin-auto-import/vite 是一个按需自动导入Vue/Vue Router等官方Api的插件。使用此插件后，不需要手动编写类似import {xx} from 'vue'这样的代码了，而是直接使用相关api，提升开发效率。
vue3 使用unplugin-auto-import自动导入模块
最新发布
@必意玲
05-15 372
模块化已经是现代 Web 开发必不可少的开发方式，频繁引入依赖包是一个常见的操作。但是，手动引入依赖包往往繁琐，尤其是当依赖包数量较多时，会显著降低开发效率。插件，可以帮助我们在项目中，自动导入常用的使用的第三方库的 API，就可以方便我们开发，提升开发效率。如果项目中使用eslintrc校验则需在vite.config.ts中的AutoImport添加配置。配置完成，运行项目会在根目录生成auto-import.d.ts文件。
vue3自动引插件unplugin-auto-import全局引用ref、watch等（五星推荐）.md
07-14
在vue3开发中每个页面都要写这些引入ref, onMounted, onUnmounted, watch这些方法的代码，太麻烦了。 unplugin-auto-import插件可以帮我们自动引入，用什么自动引什么很方便很省心。
项目中自动引入神器 - unplugin-auto-import/unplugin-vue-components
不想起床
03-28 2260
在开发中，我们总喜欢站在巨人的肩膀上开发，比如用一些框架：vue,react,组件库：element，ant。工具函数：axios，lodash现在是模块化时代，我们也喜欢封装一些组件/工具库，但是都需要引入。v3更是改成composition API ,用那个引入那个，不知道你为此是否感到繁琐，今天就让我们来学习使用两款插件，解放双手，让我们有更多的摸鱼时间🦑。
【vue3】使用unplugin-auto-import自动导入模块
IU
06-28 2766
模块化已经是现代 Web 开发必不可少的开发方式，频繁引入依赖包是一个常见的操作。但是，手动引入依赖包往往繁琐，尤其是当依赖包数量较多时，会显著降低开发效率。插件，可以帮助我们在项目中，自动导入常用的使用的第三方库的 API，就可以方便我们开发，提升开发效率。
unplugin-auto-import的使用
我是香菜
01-04 1万+
unplugin-auto-import的使用
unplugin-auto-import 和 unplugin-vue-components
梅花寺
01-14 1万+
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
【Vue】自动导入组件
俊刚的博客
12-21 1881
插件的作用是自动导入第三方库或组件。它会根据我们在代码中使用的标识符自动检测并导入相应的库或组件。这样，我们就不需要手动导入它们了。插件的作用是自动注册Vue组件。它会根据我们在代码中使用的组件标签自动注册相应的组件。这样，我们就不需要在每个页面或组件中手动注册它们了。通过使用和插件，我们可以大大简化第三方库和组件的导入和注册过程。这样，我们可以更专注于业务逻辑而不是繁琐的导入和注册操作，提高开发效率。
vue3自动引入插件unplugin-auto-import （vite搭建项目，vue-cli搭建项目两种方式）
qq_42859450的博客
08-03 1万+
vue3自动引入插件
模块自动导入工具 unplugin-auto-import
Xc_Wl的博客
09-16 1188
如果是vite 就把unplugin-vue-components/webpack 改为unplugin-vue-components/vite ,他是有提示的。下面是官方给的案例。以上就是unplugin-auto-import插件使用了，更多请去官方文档查看。然后我们页面的axios就可以删除掉了，不需要引入。今天介绍一款开发时能自动导入模块的工具，他就是。然后进入页面在更目录下面创建一个。然后介绍一下这个插件的几个属性。
vue-auto-routing：自动生成Vue路由器路由
02-27
// Import generated routesimport routes from 'vue-auto-routing'import Vue from 'vue'import Router from 'vue-router'Vue . use ( Router )export default new Router ( { // Pass the generat
vite-plugin-autoimport:自动检测并导入组件或模块
08-04
vite-plugin-autoimport 自动检测和导入组件或模块。动机随着项目的增长，在一个文件中包含多个组件是很常见的，并且几乎每个文件中都可能导入几个常用模块。 因此，这个插件是为了减少导入的代码。 您可以将这些...
Vue3 （unplugin-auto-import自动导入的使用）
想好了再写！
02-23 1497
【代码】Vue3 （unplugin-auto-import自动导入的使用）
Vue3 + Element Plus 按需引入 - 自动导入
Yana's Blog
07-14 1万+
Element Plus 使用按需引入，大大缩小打包后的文件大小。
unplugin-auto-import的配置和eslint报错解决
热门推荐
sayUonly的博客
03-14 2万+
unplugin-auto-import的配置和eslint报错解决 先上官网：unplugin-auto-import unplugin-auto-import 解决了vue3-hook、vue-router、useVue等多个第三方插件的自动导入，也支持自定义插件的自动导入，是一个功能强大的typescript支持工具。 unplugin-auto-import常用的配置如下： AutoImport({ // 目标文件 include: [ /\.[tj]sx?$/, // .ts, .
vue3 配置自动导入API和组件 亲测有效
2303_77072102的博客
01-09 1161
vue3自动导入Api以及自定义组件原理。
个人建站前端篇（六）插件unplugin-auto-import的使用
qq_43206280的博客
02-20 1218
vue3日常项目中定义变量需要引入ref,reactive等等比较麻烦，可以通过unplugin-auto-import给我们自动引入解决了vue3-hook、vue-router、useVue等多个插件的自动导入，也支持自定义插件的自动导入，是一个功能强大的typescript支持工具。
Webpack 配置unplugin-vue-components unplugin-auto-import
10-18
unplugin-vue-components 是一个用于自动导入 Vue 组件的 Webpack 插件，它可以根据你的代码中使用的组件自动导入相应的组件，从而减少手动导入的工作量。而 unplugin-auto-import 则是一个用于自动导入 JavaScript 模块的 Webpack 插件，它可以根据你的代码中使用的模块自动导入相应的模块，从而减少手动导入的工作量。 如果你想在 Webpack 中同时使用这两个插件，可以按照以下步骤进行配置： 1. 安装插件： ``` npm install unplugin-vue-components unplugin-auto-import -D ``` 2. 在 Webpack 配置文件中引入插件： ```javascript const { defineConfig } = require('vite') const vue = require('@vitejs/plugin-vue') const Components = require('unplugin-vue-components/webpack') const AutoImport = require('unplugin-auto-import/webpack') module.exports = defineConfig({ plugins: [ vue(), Components({ /* options */ }), AutoImport({ /* options */ }) ] }) ``` 3. 配置插件选项： unplugin-vue-components 和 unplugin-auto-import 都有一些选项可以配置，具体可以参考官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

菜鸟茜

随多随少随你心意^-^

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

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

打赏作者

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

抵扣说明：

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

余额充值