首页 > 其他分享 >Vue3-vite 按需引入Element-plus

Vue3-vite 按需引入Element-plus

时间:2023-09-26 10:59:52浏览次数:47  
标签:vue auto Element unplugin plus components import vite

1.下载unplugin-vue-components,unplugin-auto-import 包

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

2.vite.config.js 文件中配置

1 import AutoImport from 'unplugin-auto-import/vite'
2 import Components from 'unplugin-vue-components/vite'
3 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
1 plugins: [ 
2       // 按需引入Element-plus
3       AutoImport({
4         resolvers: [ElementPlusResolver({ importStyle: false })]
5       }),
6       Components({
7         resolvers: [ElementPlusResolver()]
8       })
9     ],

 

标签:vue,auto,Element,unplugin,plus,components,import,vite
From: https://www.cnblogs.com/tan253/p/17729609.html

相关文章

  • Mybatis-Plus 系列:简介和基本使用
    目录一、简介二、特性三、基本使用1、初始化数据库2、初始化工程3、精简SpringBoot相关日志一、简介官网:https://www.baomidou.comMyBatis-Plus是一个MyBatis的增强工具,在MyBatis的基础上只做增强不做改变,主要作用为简化开发、提高效率。二、特性无侵入:只做增强不做改......
  • 解决vite不是内部或外部命令,也不是可运行的程序 或批处理文件
    要vite创建vue3.0项目的时候,到了最后一步npmrundev的时候出现了以下错误:‘vite’不是内部或外部命令,也不是可运行的程序或批处理文件。问题的原因是:缺少安装依赖这一步!vite不像node或cli,会自动帮助我们执行npmi(install)命令去下载相关依赖,需要我们手动下载解决问题输入......
  • 如何在vite+vue3中的html页面中使用变量?
    如何在vite+vue3中的html页面中使用变量?vite版本:4.1.5vue版本:3.2.47需要引入新的开发依赖:yarnaddvite-plugin-html-D修改vite.config.ts文件配置...//@ts-ignoreimport{createHtmlPlugin}from"vite-plugin-html";exportdefault({mode}:ConfigEnv):Us......
  • 使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理
    目录1、前言2、分析3、实现4、踩坑4.1、拖拽辅助线的坑4.2、数据的坑4.3、限制拖拽4.4、样式调整1、前言最近在做一个文件夹管理的功能,要实现一个树状的文件夹面板。里面包含两种元素,文件夹以及文件。交互要求如下:创建、删除,重命名文件夹和文件可以拖拽,拖拽文件到文件夹中,或......
  • 【ElementUI】ElementUI Tooltip 根据内容判断是否显示、文字提示自定义样式
    【ElementUI】ElementUITooltip根据内容判断是否显示、文字提示自定义样式封装组件自定义内容<template><spanv-if="['',null,undefined].indexOf(content)===-1"><el-tooltip:content="content"effect="light"placement="bot......
  • Vite+ts+springboot项目集成2
    项目集成集成element-plus官网地址:安装图标库pnpminstallelement-plus@element-plus/icons-vue入口文件main.ts全局安装element-plus,element-plus默认支持语言英语设置为中文importElementPlusfrom'element-plus';import'element-plus/dist/index.css'//@ts-ig......
  • Vue-进阶:路由及elementUI组合开发
    Vue-router路由什么是vue-router?服务端路由指的是服务器根据用户访问的URL路径返回不同的响应结果。当我们在一个传统的服务端渲染的web应用中点击一个链接时,浏览器会从服务端获得全新的HTML,然后重新加载整个页面。然而,在单页面应用中,客户端的JavaScript可以拦截页面的......
  • mybatis plus生成的日期时间格式LocalDateTime与String的相互转换
    mybatisplus生成的日期时间格式为LocalDateTime LocalDateTime转为String:将现在的时间转StringStringnowDate=LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-ddHH:mm:ss"))  将指定的String日期转DatetimeLocalDateTimeldatetime=Lo......
  • 《C++ Primer Plus》
    第一章预备知识1.1C++简介C++编程语言融合了3种不同的编程方式:C语言代表的过程性语言、面向对象语言、C++模板支持的泛型编程。1.2C++简史C语言  20世纪70年代,贝尔实验室的DennisRitchie致力开发UNIX操作系统。传统上,程序员使用汇编语言来满足这些需求。但由于汇编语......
  • WorkPlus Meet本地化部署视频会议软件,助力企业实现安全高效的远程会议
    在全球化的时代,企业跨地域的合作与沟通日益频繁。本地化部署视频会议软件成为了企业提升沟通效率的重要手段。WorkPlusMeet作为领先厂家,提供本地化部署的视频会议软件,为企业打造高效的沟通环境。本文将详细介绍WorkPlusMeet本地化部署视频会议软件的优势以及助力企业实现高效安全......