Element-plus按需引入

简介: Element-plus按需引入

安装element-plus插件


npm install element-plus --save


安装配置文件


npm install babel-plugin-component -D


在项目根路径下配置babel.config.js文件


//babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { 'modules': false }]
  ],
  'plugins': [
    [
      'component',
      {
        'libraryName': 'element-plus',
        'styleLibraryName': 'theme-chalk'
      }
    ]
  ]
}


按需引入


import 'element-plus/lib/theme-chalk/index.css';
import { ElButton } from 'element-plus'
createApp(App).use(ElButton).mount('#app')


注意:我们不能在vite创建的vue3项目中使用按需引入,当引入样式文件后,会报错。


详细信息请访问element官网


相关文章
|
1月前
|
JavaScript 前端开发 数据安全/隐私保护
UI 框架:Element-plus组件库(一)
在现代Web开发中,用户界面的设计与交互体验至关重要。随着前端技术的迅速发展,各种UI框架层出不穷,旨在提升开发效率和用户体验。其中,Element Plus作为一款基于Vue 3的组件库,因其简洁优雅的设计和丰富的功能而备受欢迎。 Element Plus不仅提供了众多高质量的组件,还注重与开发者的友好互动,使得即使是初学者也能快速上手。在本系列文章中,我们将深入探讨Element Plus的各个组件及其应用,通过实例演示如何有效利用该框架构建美观且功能强大的用户界面。
115 0
|
4月前
Element UI 按需引入(含CollapseTransition)
Element UI 按需引入(含CollapseTransition)
119 1
Vue3使用element-plus图标,局部引入写法
Vue3使用element-plus图标,局部引入写法
|
4月前
|
JavaScript
Vue3如何使用element-ui,vue3使用Element,Element使用
Vue3如何使用element-ui,vue3使用Element,Element使用
|
6月前
|
JavaScript 编译器
vue3引入element-plus完整步骤
vue3引入element-plus完整步骤
794 5
|
6月前
Element-UI结合脚手架之按需引入
Element-UI结合脚手架之按需引入
48 0
|
算法 JavaScript 测试技术
vue3源码分析——实现element属性更新,child更新
在上面流程图中,如果在setup中有一个对象obj,并且赋值为 ref({a:1}),然后通过某种方式重新赋值为2,就会触发更新流程;
vue3源码分析——实现element属性更新,child更新
|
11月前
|
前端开发 JavaScript CDN
【 Element UI 】—Element UI 的基本使用
【 Element UI 】—Element UI 的基本使用
|
JavaScript
Vue 引入 Element-UI 组件库
Vue 引入 Element-UI 组件库
222 0
|
JavaScript API
Vue3 + Element-plus Tree 组件的 @check 事件使用方案
Vue3 + Element-plus Tree 组件的 @check 事件使用方案
718 0