当前位置：

首页 > 编程开发 > vue3怎么集成Element-plus实现按需自动引入组件

vue3怎么集成Element-plus实现按需自动引入组件

作者：归人云淡风轻时间：2025-03-26 来源：正软商城浏览：5

首先下载element-plusnpminstallelement-plus1、第一种方式，使用全局引入引入element-plus的方式是全局引入，代表的含义是所有的组件和插件都会被自动注册，优点：上手快缺点：会增大包的体积在main.ts文件中import{createApp}from'vue'//全局引入importElementPlusfrom'element-plus'import'element-plus/dist/index.css'impor

本文目录

首先下载element-plus

npm install element-plus

1、第一种方式，使用全局引入

引入element-plus的方式是全局引入，代表的含义是所有的组件和插件都会被自动注册，

优点：上手快

缺点：会增大包的体积

在main.ts文件中

import { createApp } from 'vue'
// 全局引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import store from './store'
 
const app = createApp(App)
app.use(router)
app.use(store)
app.use(ElementPlus)
app.mount('#app')

2、第二种方式，使用局部引入

局部引入也就是在开发中用到某个组件对某个组件进行引入，



import { defineComponent } from 'vue'
// 局部引入
import { ElButton } from 'element-plus'
import 'element-plus/theme-chalk/el-button.css'
import 'element-plus/theme-chalk/base.css'
export default defineComponent({
  components: { ElButton },
  setup() {
    return {}
  }
})

但是这样我们在开发时每次使用都要手动在组件中引入对应的css样式，使用起来会比较麻烦

3、按需自动引入element-plus 推荐

需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

安装完成之后在vue.config.js文件中配置

// 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 = {
  outputDir: './build',
  // 和webpapck属性完全一致，最后会进行合并
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components'
      }
    },
    //配置webpack自动按需引入element-plus，
      plugins: [
        AutoImport({
          resolvers: [ElementPlusResolver()]
        }),
        Components({
          resolvers: [ElementPlusResolver()]
        })
      ]
  }
}

按需自动引入配置完之后，在组件中可直接使用，不需要引用和注册这里已经实现了按需自动移入Element-plus组件组件中直接使用：



import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    return {}
  }
})

效果：

vue3怎么集成Element-plus实现按需自动引入组件

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系bd@zhengruan.com

作者最新文章

夸克浏览器怎么把网页添加到桌面 2026-11-06 17:42

Visual Studio2019代码查找替换使用正则表达式方法 2026-11-06 12:03

coreldraw快捷键怎么设置在哪里 2026-11-02 21:39

AO3最新可用链接及中文入口汇总 2026-10-29 13:32

coreldraw怎么插入图片图片导入步骤 2026-10-27 15:37

编程开发 Vue3

上一篇：组装电脑配置清单及价格

下一篇：《咪咕视频》开启青少年模式方法

相关文章更多

pinia数据持久化的步骤详解与插件配置教程

详解Pinia数据持久化的实现步骤，包括手动订阅状态、封装通用插件及处理序列化例外，帮助开发者构建稳定的前端状态存储方案。

2026-10-29 8 DreamView

Vue3 数据持久化

如何从零开始搭建vue3项目

说明记录一次Vue3的项目搭建过程。文章基于vue3.2.6和vite2.51版本，使用了ui库Elementplus，vue-router4，Layout布局封装，axios请求封装，别名配置等。开始1.使用vscode开发工具安装vue3的插件Volar，在vue2中我们使用的是Vetur。vue3在线code工具传送门sfc.vuejs.org/2.执行初始化及安装命令：npminitvite初始化vite此过程可以输入项目名、选择vue/react项目及js/ts环境选择，vue3已经完全支持ts

2025-07-05 7 BrightSoul

vue3中getCurrentInstance怎么使用

父组件中：1.setup语法糖中导入子组件2.在子组件标签上绑定ref值3.setup内部从vue中按需导出getCurrentInstance方法4.调用getCurrentInstance方法导出proxy5.通过proxy.$refs.子组件ref名.子组件内属性/方法实现调用子组件count+1import{getCurrentInstance,ComponetInternalInstance,ref}from"vue";importChildfrom"./zi.vue";constchild=r

2025-06-02 2 小宇宙叶知秋

怎么使用vue3搭建后台系统

首先使用npm或者yarn创建一个vue项目//使用npm创建一个基于vite构建的vue项目npmcreatevite@latest//使用yarn创建一个基于vite构建的vue项目yarncreatevite@latest在创建的构成中选择vuevue-ts创建完之后将项目拖到编译器打开一、配置vite在vite.config.ts文件中配置项目的服务数据，配置如下：//此处配置项目服务参数server:{host:"0.0.0.0",//项目运行地址，此处代表localhostport:8888,

2025-05-28 3 RainLight

Vue3基于countUp.js怎么实现数字滚动的插件

countUp简介CountUp.js是一种无依赖项的轻量级JavaScript类，可用于快速创建以更有趣的方式显示数字数据的动画。CountUp可以在两个方向上进行计数，具体取决于传递的开始和结束值。虽然现在市面上基于countUp.js二次封装的Vue组件不在少数，但我个人是不太喜欢使用这些第三方封装的，因为第三方组件的更新频率很难保证，也许作者只是一时兴起封装上传了，并未打算继续维护，如果使用了等于后续根本没有维护性了，所以这种二次封装我推荐自行实现，我们可以通过本次封装熟悉一下vue3,ts的语法

2025-05-25 3 NorthPath

vue3中addRoute路由变化但页面未更新如何解决

解决办法，每次addRoute时深复制组件对象importtimefrom"../views/time"functioncopyObj(obj){if(typeofobj=="object"){if(Array.isArray(obj)){letarr=[];for(letitemofobj){arr.push(Object.assign(copyObj(item)));}returnarr;}elseif(obj==null){returnnull;}else{letobj1={};for(letind

2025-05-24 3 小月亮

怎么将Vue3 Axios拦截器封装成request文件

1、创建一个名为request.js的新文件，并导入Axios：importaxiosfrom'axios';2、创建一个名为request的函数，并将其导出：这将创建一个名为request的函数，并将其设置为具有基本URL的新的Axios实例。要在封装的Axios实例中添加超时设置，可以在创建Axios实例时传递timeout选项。exportconstrequest=axios.create({baseURL:'https://example.com/api',time

2025-05-20 8 OpenWorld

axios Vue3

Vue3侦听器的实现原理是什么

侦听响应式对象前面我们聊到计算属性，它可以自动计算并缓存响应式数据的值。而如果我们仅需要在响应式数据变化时，执行一些预设的操作，就可以使用watch侦听器。我们还是先来实现一个最简单的例子，然后来一点一点扩充它。constdata={foo:1}constobj=reactive(data)watch(obj,()=>{console.log('obj已改变')})在这个例子中，我们使用了watch侦听器，当obj的属性被改变时，控制台应该会打印出obj已改变。基于前面我们对计算属性的实现

2025-05-17 4 SunnyJourney

vue3中的createApp怎么使用

函数定义createApp函数定义在文件packages/runtime-dom/src/index.ts中exportconstcreateApp=((...args)=>{constapp=ensureRenderer().createApp(...args)if(__DEV__){injectNativeTagCheck(app)injectCompilerOptionsCheck(app)}const{mount}=appapp.mount=(containerOrSelector:Element

2025-05-16 3 小月亮

vue3中＜script setup＞和setup函数的区别是什么

是在单文件组件(SFC)中使用组合式API的编译时语法糖。当同时使用SFC与组合式API时该语法是默认推荐。相比于普通的语法，它具有更多优势：更少的样板内容，更简洁的代码。能够使用纯TypeScript声明props和自定义事件。更好的运行时性能(其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。更好的IDE类型推导性能(减少了语言服务器从代码中抽取类型的工作)。以上是vue3官网对的说明，其实＜scriptsetup＞就是setup函数的一个语法糖。一、基本语法setup函数的写法im

2025-05-15 8 若安舟已远

热门文章更多

Photoshop蒙版换证件照背景颜色怎么改？实用操作步骤详解 AutoCAD绘制机械零件三维实体详细教程 AE教程书籍挑选指南：零基础、动效与合成方向实战标准 Photoshop图层合并快捷键是什么？合并盖印及分开图层方法 Photoshop日系调色教程：小清新风格参数与思路

精品专题更多

装机必备

正软商城装机必备专区，精选办公、浏览器、安全防护、影音播放、压缩解压、设计创作和系统工具等电脑常用正版软件，帮助用户快速完成新电脑软件配置。

Windows

正软商城Windows软件专区，汇集适用于Windows电脑的办公、设计、安全防护、影音播放、开发工具和系统优化软件，提供软件介绍、系统要求、正版授权及购买下载服务。

PDF教程

正软商城PDF教程频道提供PDF编辑、转换、合并、拆分、压缩及格式处理方法，同时介绍常用PDF软件和工具的使用技巧。