第四章 项目环境配置（七）——安装 unplugin-vue-components

已于 2024-08-11 10:01:58 修改
阅读量40 收藏
点赞数
分类专栏： 后台按钮级权限管理系统-全栈实战保姆级教程 文章标签： vue.js 前端 javascript
于 2024-08-10 23:39:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qdbest/article/details/141098340
版权

4.7 安装 unplugin-vue-components

unplugin-vue-components：按需自动导入 Vue 组件，如 element-plus 组件及自定义组件。

  1. 安装

    npm i unplugin-vue-components -D

    当前 package.json 文件：

    {
     
  "name": "yumi-admin"
了解本专栏 订阅专栏 解锁全文 超级会员免费看
yu玉米mi
关注
专栏目录
订阅专栏
第四章 项目环境配置（六）——安装 unplugin-auto-import
qdbest的专栏
08-10 45
【代码】第四章 项目环境配置（六）——安装 unplugin-auto-import。
vue3项目配置按需自动导入API组件unplugin-auto-import
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
02-19 4181
将vue、vue-router等的import语句删除，项目正常启动不报错。这款插件是前端大神Anthony Fu写的，非常实用。unplugin-auto-import的git地址。有兴趣的小伙伴可以到git上看，
unplugin-vue-components 使用教程
gitblog_00581的博客
08-09 460
unplugin-vue-components 使用教程 unplugin-vue-components???? On-demand components auto importing for Vue项目地址:https://gitcode.com/gh_mirrors/unp/unplugin-vue-components 项目介绍 unplugin-vue-components 是一个用于 Vue...
unplugin-auto-import 使用教程
gitblog_01134的博客
08-08 995
unplugin-auto-import 使用教程 unplugin-auto-importunplugin-auto-import - 一个插件，用于在 Vite、Webpack、Rspack、Rollup 和 esbuild 中自动按需导入 API，支持 TypeScript，适合希望简化代码中导入语句的前端开发者。项目地址:https://gitcode.com/gh_mirrors/un...
项目中自动引入神器 - unplugin-auto-import/unplugin-vue-components
不想起床
03-28 3780
在开发中，我们总喜欢站在巨人的肩膀上开发，比如用一些框架：vue,react,组件库：element，ant。工具函数：axios，lodash现在是模块化时代，我们也喜欢封装一些组件/工具库，但是都需要引入。v3更是改成composition API ,用那个引入那个，不知道你为此是否感到繁琐，今天就让我们来学习使用两款插件，解放双手，让我们有更多的摸鱼时间🦑。
理解按需自动导入 unplugin-auto-import & unplugin-vue-components
阿城的博客
12-21 5349
如果是自己开发的组件库，为了让它支持自动按需导入，就需要自己编写解析器。},],})resolvers 数组里可以传入一个函数，这个函数会在编译时不断执行。函数接收组件名，并返回一个和 unplugin-auto-import 插件中 imports 配置一样的配置对象，这个对象就是 import 语句的描述对象，最终依据它生成导入语句。注意：组件名会自动转成大驼峰写法。因此所谓的解析器，功能就是根据组件名映射成 import 导入语句。
Vue2基础（6）——vue-cli、element-ui、axios拦截器、proxy接口代理
SongD1114的博客
04-09 1699
Vue2基础vue-cli、element-ui、axios拦截器、proxy接口代理
一步步打造最新前端框架组合 —— vite+vue3+pinia+vue-router@4+setup+ts
m0_67393039的博客
03-09 1175
本文将会结合自己搭建经验一步一步展开，记录最新vue前端框架如何搭建。 1、安装vite 全局安装 npm init vite@latest 2、使用vite创建vue3工程 npm init @vitejs/app 第一步：工程文件名 第二步：选择框架 第三步：选择vue-ts组合 第四步：进入项目文件夹，安装依赖即可 3、配置eslint、prettier、编辑器 首先安装相关依赖，如下： npm i prettier eslint eslint-config-prettier eslint-
Vue3项目开发——新闻发布管理系统（一）
最新发布
bjzhang75的博客
08-21 478
从今天开始，我们要开发一个Vue3项目——新闻发布管理系统。我会从零开始详细给大家介绍项目是怎么开发出来的，跟我学完之后，你一定也就熟练掌握了Vue开发的全过程。让我们开始吧。
【Vue3】自动引入插件-`unplugin-auto-import`
小秀的博客
08-10 1937
自动导入 api 按需为 Vite, Webpack, Rspack, Rollup 和 esbuild。支持TypeScript。由unplugin驱动。Vue3自动引入插件-最后，举例验证插件作用。
Vue3+vite优化基础架构（1）--- 使用unplugin-vue-components
weixin_48040732的博客
04-26 2231
这里记录下自己在Vue3+vite的项目使用unplugin-vue-components/vite来自定义组件自动全局引入svg雪碧图组件，不使用ts语法，方便以后直接使用。这里承接自己的博客[Vue3+vite搭建基础架构（11）--- 菜单栏功能和Tab页功能实现](https://blog.csdn.net/weixin_48040732/article/details/136182389)这篇博客，在该博客项目的基础上增加使用unplugin-vue-components/vite来使组件全局引用
VUE学习(九) 自动引入插件unplugin-auto-import
easyboot的专栏
12-16 380
2.在vite.config.js中进行配置，并在vue文件中使用。
unplugin-vue-components 插件配置 忽略 部分目录下的组件自动导入
weixin_45485922的博客
08-01 304
unplugin-vue-components 插件
unplugin-auto-import的使用
热门推荐
我是香菜
01-04 1万+
unplugin-auto-import的使用
vue3自动引入插件unplugin-auto-import （vite搭建项目，vue-cli搭建项目两种方式）
qq_42859450的博客
08-03 1万+
vue3自动引入插件
vue3+vite插件配置系列3-unplugin-vue-components（官方文档翻译）
个人博客
02-20 1万+
nuxt/components是Nuxt.js的官方模块，它提供了类似按需导入组件的功能。通过@nuxt/components，您可以在需要时动态地导入和注册组件，而不需要使用额外的插件。在template中像平常一样使用组件，它将按需导入组件，不再需要导入和注册组件！即使对于现有的解析器，我们也建议将它们移至独立的包中，以便拥有更快的发布周期。Ant Design Vue按需导入样式目前支持css和less，然后直接在页面中使用组件库组件即可，会按需导入组件并加载样式。
个人建站前端篇（六）插件unplugin-auto-import的使用
qq_43206280的博客
02-20 1593
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 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值