如何使用Vue3整合Element-UI进行前端开发？

本文共计676个文字，预计阅读时间需要3分钟。

目录+具体操作+补充：Vue3引入ElementUI+总结+目标：element-ui支持vue2版本，部分组件在vue3中无法使用，此时我们需要导入element-plus结合vue3开发+具体操作+1. 首先安装element-ui+npm install element-ui

目录

• 具体操作
• 补充：Vue3按需引入ElementUI
• 总结

目前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内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！