解决vue3使用element-ui的具体操作
作者：_Lion Heart
elmentui是一款为vue设计的桌面组件库,下面这篇文章主要给大家介绍了关于解决vue3使用element-ui的具体操作,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
目前element-ui支持vue2版本，有一些组件在vue3中无法使用，这时候我们需要导入element-plus结合vue3开发
具体操作
1.首先安装element-ui
npm install element-ui --save
这里为什么要安装element-ui，我也不清楚，但是我一旦只安装element-plus，不安装element-ui就会报错，这里建议安装，或者不安，出问题了，再安装也可
2.安装element-plus
npm install element-plus --save
3.修改main.js文件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn'
createApp(App).use(store).use(router).use(ElementPlus, { locale }).mount('#app')
添加
import ElementPlus from 'element-plus'; import 'element-plus/theme-chalk/index.css'; import locale from 'element-plus/lib/locale/lang/zh-cn'
并且使用导入的函数模型
createApp(App).use(store).use(router).use(ElementPlus, { locale }).mount('#app')这样基本就可以了
比如解决el-table获取当前行的值的问题
<el-table :data="list" border style="width: 66%" class="tableel12">
<el-table-column prop="tradeId" label="序号" width="180" />
<el-table-column prop="stockHolderId" label="股民id" width="180" />
<el-table-column prop="bankCardId" label="卡号" />
<el-table-column prop="addedMoney" label="交易金额" />
<el-table-column prop="state" label="状态" />
<el-table-column prop="type" label="操作股票方式" />
<el-table-column label="重传">
<template #default="scope">
<el-button type="primary" @click="update2(scope.row.tradeId,scope.row.state)"
>重传</el-button
>
<!-- <el-button link type="primary" size="small">Edit</el-button> -->
</template>
</el-table-column>
</el-table>如果使用element-ui官方文档中的方式，会出错的
补充：Vue3按需引入ElementUI
这里记录下新构建的项目按需引入ElementUI
1、npm install --save element-ui
2、npm install babel-plugin-component -D
3、在 babel.config.js文件里如下图
module.exports = {
presets: [
"@vue/cli-plugin-babel/preset",//这行是默认有的，其余是要加的。
["@babel/preset-env", { modules: false }],//之前第一项写的是es2015,但是报错了，后来看了别的博主，发现因为Vue版本太高了，写es2015会出错。
],
plugins: [
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk",
},
],
],
};
4、main.js文件中按需引入样式
import { Button, Select } from "element-ui";
Vue.use(Button);
Vue.use(Select);接下来就可以在vue文件中写了。
总结
到此这篇关于解决vue3使用element-ui的具体操作的文章就介绍到这了,更多相关vue3使用element-ui内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！