Vue3 使用 element-plus 不生效的原因之一

根据这篇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'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App)
app.use(ElementPlus)
createApp(App).use(router).mount('#app')

片头所提文章是这样的:

import { createApp, Vue } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

后来发现,要这么改:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App)
app.use(ElementPlus)
app.use(router).mount('#app')

这样的话createApp(App)才指的是一个app
改完element-plus立马生效

评论区网友的其他可能的解决方法(未验证):

sJx: 无效的可以把

import 'element-plus/lib/theme-chalk/index.css';

改为:

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

Lyours:babel.config.js里配置了按需加载

  • 35
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 22
    评论
ag-grid-vue3 是一个用于 Vue3 的数据表格组件,而 element-plus 是一个基于 Vue3 的 UI 组件库。虽然这两个组件库可以独立使用,但是它们可以一起使用以增强 UI 功能。 首先,你需要在项目中安装 element-plus,可以使用 npm 或 yarn 安装,如下所示: ``` npm install element-plus --save ``` 或 ``` yarn add element-plus ``` 安装完成后,在 Vue3 中使用 element-plus 组件,你可以在 main.js 文件中使用以下代码: ```javascript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' const app = createApp(App) app.use(ElementPlus) app.mount('#app') ``` 这里我们在 main.js 中导入了 ElementPlus 组件,并使用 app.use(ElementPlus) 将组件注册到 Vue3 中。注意,为了让样式生效,你需要在 main.js 中引入 element-plus/lib/theme-chalk/index.css。 接下来,在 ag-grid-vue3 中使用 element-plus 组件,你可以在 ag-grid-vue3 的 columnDefs 中使用 element-plus 的组件,例如: ```javascript { headerName: '姓名', field: 'name', cellRendererFramework: { template: '<el-button>{{ value }}</el-button>', data() { return { value: '' } }, mounted() { this.value = this.params.value } } } ``` 这里我们在 ag-grid-vue3 的 columnDefs 中使用element-plus 的 el-button 组件作为单元格渲染器,这样我们就可以在 ag-grid-vue3 中使用 element-plus 的组件了。
评论 22
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

叼辣条闯天涯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值