关于Element-plus按需引入的一些坑-1

最新推荐文章于 2024-07-30 18:16:35 发布
最新推荐文章于 2024-07-30 18:16:35 发布
阅读量4.8k 收藏 5
点赞数 2
分类专栏： element-plus的小坑 文章标签： vue.js 前端 es6 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1831511974/article/details/121327453
版权

在使用vite之后element-plus按需引入用了插件unplugin-vue-components，其中有些问题记录一下。

在使用Elmessage等写在js文件中的反馈提示消息的组件消息时插件识别不到css文件，就会出现如下效果

 这时就需要在main.ts中手动引入你所需要的css文件如

import 'element-plus/theme-chalk/el-message.css

 如果图省事把css文件全部引入就是这样

import 'element-plus/dist/index.css'

不过既然都按需引入了，优雅就优雅到底，尽量别全部引入，引入成功elmessage的效果应该是这样

也许之后 unplugin-vue-components插件会更新修复这个bug，但如果没修复就暂时这样把.......

杨小c丶
关注
专栏目录
element plus安装引入使用大坑
weixin_45642452的博客
04-28 2546
最近做毕设，准备用vue写前端，自然用到了elementplus,处处踩雷必须记录。 首先是版本对应，vue2对应element-ui,vue3对应element-plus，强行安装只会出错，另外安装的时候需要把已经npm run的项目停下来，否则安装的依赖会因为无法进入package.json而引入失败。 关于使用，由于我的main.ts文件是在创建项目的时候自动生成的，所以它的app声明只有一句 app=createApp(App).use(store).use(router).mount('#app'
element-plus 按需引入的两种方式( 官方推荐方式 及babel-plugin-import)
web15085599741的博客
02-26 1113
1.官方推荐方式 首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件 npm install -D unplugin-vue-components unplugin-auto-import Webpack安装 方式一：写入 webpack.config.js const AutoImport = require('unplugin-auto-import/webpack') const Components = require('unplu
vite tsx项目的element plus集成 - 按需引入踩坑
最新发布
felix_alone2012的博客
07-30 553
前面我们进行了开源组件的自研，很多组件可直接用现成的开源组件库，并不需要自己重复造轮子，为此我们讲如何在当前技术整合的项目中实现组件的按需引入，同时解决遇到的一些坑。
element plus按需导入的坑
akatukijohi的博客
04-12 3592
element plus版本2.1.8，用了官网的方法，靠unplugin-auto-import和unplugin-vue-components实现按需导入后，因为element plus默认是英文，所以要转成中文。 此时，官网给了两个方法： 方法一 在main.js里添加如下代码。如果你是按需导入，千万别用，直接破功变成全局注册了。用了以后打包，包变大了两兆多。 import ElementPlus from 'element-plus' import zhCn from 'element-plus/e
基于 vue cli@4.x vue3 + typescript 按需加载element-plus 踩坑日记
m289065365的专栏
10-12 1127
最近研究了一下vue cli@4.5.x + vue3 +typescript 引入elemlent ui 频繁出现报错 个人不建议使用 vue add element 安装会有未知错误发生 以下是我总结出来的调试安装, 发现安装过程不断踩坑. 最后下面4个步骤解决 1. 安装必要依赖 npm install element-plusbabel-plugin-importsass sass-loader@10.1.1 --save-dev 2.配置babel.config.js...
Nuxt配置Element-UI按需引入的操作方法
10-15
主要介绍了Nuxt配置Element-UI按需引入方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
element-plus(element-plus@2.5.5) 本地离线资源
02-05
element-plus@2.5.5 本地离线资源，适用于没有网络连接、搭建自己的cdn等用途。 All files（包含文件） /npm/element-plus@2.5.5/dist /npm/element-plus@2.5.5/es /npm/element-plus@2.5.5/lib /npm/element-...
Vue3.x+element-plus+ts踩坑笔记
weixin_47367099的博客
10-23 2014
前段时间小颖在B站找了个学习vue3+TS的视频，自己尝试着搭建了一些基础代码，在实现功能的过程中遇到了一些问题，为了防止自己遗忘，写个随笔记录一下嘻嘻。
element-plus：踩坑日记
weixin_43932309的博客
05-24 407
element-plus
vue3-element-plus按需引入
lxs19930928的博客
12-19 808
项目目录 下载element-plus yarn add -D element-plus 新建plugins文件夹 新建element-plus.js文件夹 import { ElButton } from "element-plus"; const components = [ElButton] export const componentsPlugin = app => components.forEach(app.use, app) import { Edit,Search } f
element plus使用问题
PBitW的博客
01-27 1367
element plus vue.config.js 注意 1、有时候会报错 not a function 2、使用 ElMessage 报错 3、 element plus 版本过高 4、警告Feature flag VUE_PROD_HYDRATION_MISMATCH_DETAILS is not explicitly defined. 5、报错 ResizeObserver loop completed with undelivered notifications. element plus ico
Element-plus自动导入组件，组件样式失效问题
WDNMde_的博客
03-19 6027
项目里使用自动导入的方法使用element-plus，并且使用script setup编写vue3代码。 组件A的script setup里要用到Elfrom类型，因此必须要引入Elform //组件A import { Elform } from 'element-plus' // elform组件对象 const formRef = ref<InstanceType<typeof ElForm>>() 如果只有一个组件引入了Elform还没有问题， 但是当我在另外一个组件也引.
uniapp使用element-plus的自动导入和按需导入
qqhll_的博客
12-04 2215
uniapp使用element-plus的自动导入和按需导入
#element-plus# not found: Error: Can‘t resolve ‘element-plus/es/components/xxxx/style/css‘ in...
老衲的少女心i~
12-05 698
重新下载element-plus，即可解决。执行npm run serve报错。
Vue3 使用 element-plus 不生效的原因之一
热门推荐
叼辣条闯天涯
03-18 2万+
根据这篇https://blog.csdn.net/GongWei_/article/details/109986596 配置下来，发现还是不生效，折腾半天之后发现，由于我用了router，所以我没动最后一句“createApp(App).use(router).mount(’#app’)”，我的main.js是这么改的： import { createApp } from 'vue' import App from './App.vue' import router from './router' imp
element-plus学习笔记(一)
baidu_41388533的博客
10-18 3609
引入Element-plus(main.js) import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import 'element-plus/theme-chalk/display.css' app.use(ElementPlus) router-link 的下划线去除 a { text-decoration: none; } .router-link-active { text-decor
element-plus按需引入方法
06-09
要使用 element-plus 的按需引入功能，你需要先安装 babel-plugin-component 插件： ``` npm install babel-plugin-component -D ``` 然后在 babel 配置文件中添加以下配置： ``` // babel.config.js module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ [ "component", { "libraryName": "element-plus", "styleLibraryName": "theme-chalk" } ] ] } ``` 最后，你可以在组件中按需引入 element-plus 的组件： ``` <template> <el-button type="primary">Primary</el-button> </template> <script> import { ElButton } from 'element-plus' export default { components: { ElButton } } </script> ```
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值