vite+vue3 自动按需导入element-plus

news2024/11/22 23:03:14

安装element

npm install element-plus

自动导入

安装自动导入的插件:

npm install -D unplugin-vue-components unplugin-auto-import

配置

vite.config.js文件:

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

如果是webpack的话:vue.config.js

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

大功告成!从始至终没有动过main.js文件哦。是不是很简单,官方也推荐自动导入的方式呢
在这里插入图片描述

使用组件

比如el-image
在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/892894.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Axios使用CancelToken取消重复请求

处理重复请求:没有响应完成的请求,再去请求一个相同的请求,会把之前的请求取消掉 新增一个cancelRequest.js文件 import axios from "axios" const cancelTokens {}export const addPending (config) > {const requestKey …

陕西科技大学改考408!附考情分析

改考信息 8月14日,陕西科技大学公布了2024年硕士研究生招生目录(初稿),其中不难发现083500软件工程初试专业课由819数据结构改为408计算机学科专业基础 图片:陕西科技大学24专业目录-软件工程学硕 https://yjszs.sus…

Vue组件库 (一):Element常用组件

Element基于Vue2.0的桌面端组件库 组件:组成网页的部件。例如超链接、图片、按钮等。 一、环境配置 1、下载element 在vscode工程终端下下载。一定要注意:是在工程下安装! npm install element -ui2.15.3 出现以下问题: 经判…

基于Spring Boot的机场VIP客户管理系统的设计与实现(Java+spring boot+MySQL)

获取源码或者论文请私信博主 演示视频: 基于Spring Boot的机场VIP客户管理系统的设计与实现(Javaspring bootMySQL) 使用技术: 前端:html css javascript jQuery ajax thymeleaf 微信小程序 后端:Java s…

泰迪大数据挖掘建模平台功能特色介绍

大数据挖掘建模平台面相高校、企业级别用户快速进行数据处理的建模工具。 大数据挖掘建模平台介绍 平台底层算法基于R语言、Python、Spark等引擎,使用JAVA语言开发,采用 B/S 结构,用户无需下载客户端,可直接通过浏览器进行…

水库信息化综合管理系统解决方案

一、系统概述 水库综合信息化管理系统主要对水库坝址以上流域、工程本身、下游受益区及相关区的实时气象、水情、工情、旱情、洪涝灾情,以及社会经济和自然环境等信息自动化实时采集,构建一站式的水库信息公共平台,通过多功能完善的系统软件和…

C# Windows登录界面进行截图,控制鼠标键盘等操作实现(一)

首先常规的账户进程是没办法获取登录界面的信息的,因为登录界面已经不在某个账户下了,登录界面显示了每一个账户的切换。所以得使用System权限的进程。 那么Windows系统究竟是怎么将登录界面与用户桌面隔离开的呢?首先先通过一些Windows操作系…

Linux系统编程4(进程信号详解)

你知道为什么当程序中出现除0就会引发程序崩溃退出吗?你知道为何在Linux中输入kill -9 pid 就能杀死进程id为pid的进程吗?这篇文章将详细探讨解答这些问题,文章内容比较长,大家可以收藏慢慢看 什么是信号 在进程间通信这篇文章中…

一百五十九、Kettle——Kettle9.2通过配置Hadoop clusters连接Hadoop3.1.3(踩坑亲测、附流程截图)

一、目的 由于kettle的任务需要用到Hadoop(HDFS),所以就要连接Hadoop服务。 之前使用的是kettle9.3,由于在kettle新官网以及博客百度等渠道实在找不到shims的驱动包,无奈换成了kettle9.2,kettle9.2的安装…

【Apollo学习笔记】—— Planning模块

前言 本文记录学习planning模块时的一些笔记,总体流程参照https://zhuanlan.zhihu.com/p/61982682中的流程图,如上图所示。 planning_component modules/planning/planning_component.cc PlanningComponent::Init部分首先完成规划模式的选择&#xff…

ArcGIS 利用cartogram插件制作变形地图

成果图 注:本图数据并不完全对,只做为测试用例 操作 首先需要下载一个插件cartogram 下载地址在这里 https://www.arcgis.com/home/item.html?idd348614c97264ae19b0311019a5f2276 下载完毕之后解压将Cartograms\HelpFiles下的所有文件复制到ArcGIS…

LeetCode(力扣)257. 二叉树的所有路径Python

LeetCode257. 二叉树的所有路径 题目链接代码 题目链接 https://leetcode.cn/problems/binary-tree-paths/ 代码 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.…

ChatGPT成为工作工具,具体都应用在哪些地方?

Verified Market Research估计,到2030年,人工智能写作辅助软件市场将达到约65亿美元,复合年增长率为27%。生成式人工智能的浪潮正在席卷世界各地的营销部门。 Botco对美国1000名工作人员进行的调查发现,73%的人表示他们会利用生成…

IO流 详细介绍

一、IO流概述 1.IO:输入(Input读取数据)/输出(Output写数据) 2.流:是一种抽象概念,是对数据传输的总称,也就是说数据在设备间的传输称为流,流的本质是数据传输IO流就是用来处理设备间数据传输问题的。 3.常见的应用&#xff1a…

SQL两张表数据对比

表1: 表2: 1、查询两表的数据差异: # 查询表1中有但表2没有的数据 SELECT DATA FROM data1 WHERE ( DATA ) NOT IN ( SELECT DATA FROM data2 );# 查询表2中有但表…

MySQL系统变量 会话变量,用户变量

系统变量 分类 全局系统变量需要添加 global 关键字,有时把全局系统变量简称 全局变量 会话系统变量需要添加 session 关键字,有时也把会话系统变量称为 local 变量 局部变量 如果不写(global、session)默认会话级别。 静态变量在…

LeetCode[56]合并区间

难度:Medium 题目: 以数组 intervals 表示若干个区间的集合,其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间,并返回 一个不重叠的区间数组,该数组需恰好覆盖输入中的所有区间 。 示例 1&…

Practices11|41. 缺失的第一个正数(数组)、73. 矩阵置零(矩阵)

41. 缺失的第一个正数(数组) 1.题目: 给你一个未排序的整数数组 nums ,请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。 示例 1: 输入:nums [1,2,0] 输出&#xf…

用于智能图像处理的计算机视觉和 NLP

莫斯科,神秘之城...(这张照片由伊戈尔沙巴林提供) 一、说明 如今,每个拥有智能手机的人都可能成为摄影师。因此,每天都有大量新照片出现在社交媒体、网站、博客和个人照片库中。尽管拍照的过程可能非常令人兴奋&#x…

在ubuntu+cpolar+rabbitMQ环境下,实现mq服务端远程访问

文章目录 前言1.安装erlang 语言2.安装rabbitMQ3. 内网穿透3.1 安装cpolar内网穿透(支持一键自动安装脚本)3.2 创建HTTP隧道 4. 公网远程连接5.固定公网TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 RabbitMQ是一个在 AMQP(高级消息队列协议)基…