解决vue3使用element-ui的具体操作

 更新时间:2022年08月08日 14:31:07   作者:_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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue基于Vue2.0和高德地图的地图组件实例

    vue基于Vue2.0和高德地图的地图组件实例

    本篇文章主要介绍了vue基于Vue2.0和高德地图的地图组件实例,非常具有实用价值,需要的朋友可以参考下
    2017-04-04
  • vue事件修饰符和按键修饰符用法总结

    vue事件修饰符和按键修饰符用法总结

    本篇文章主要介绍了vue事件修饰符和按键修饰符用法总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Vue模板内引入的组件样式覆盖失效原因及解决

    Vue模板内引入的组件样式覆盖失效原因及解决

    这篇文章主要介绍了Vue模板内引入的组件样式覆盖失效原因及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue中PC端地址跳转移动端的操作方法

    vue中PC端地址跳转移动端的操作方法

    最近小编接到一个项目pc端和移动端是两个独立的项目,两个项目项目中的内容基本相同,链接组合的方式都有规律可循,接到的需求便是在移动端访问pc端的URL连接时,重定向至移动端对应页面,下面小编给大家分享实现过程,一起看看吧
    2021-11-11
  • 浅谈Vue父子组件和非父子组件传值问题

    浅谈Vue父子组件和非父子组件传值问题

    本篇文章主要介绍了浅谈Vue父子组件和非父子组件传值问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-08-08
  • vue3实现动态添加路由

    vue3实现动态添加路由

    这篇文章主要介绍了vue3实现动态添加路由方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • Vue的diff算法原理你真的了解吗

    Vue的diff算法原理你真的了解吗

    这篇文章主要为大家详细介绍了Vue的diff算法原理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • 一文带你从零开始搭建vue3项目

    一文带你从零开始搭建vue3项目

    使用VUE3开发很久了,但一直没进行总结和记录,下面这篇文章主要给大家介绍了关于从零开始搭建vue3项目的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • Vue3动态路由(响应式带参数的路由)变更页面不刷新的问题解决办法

    Vue3动态路由(响应式带参数的路由)变更页面不刷新的问题解决办法

    问题来源是因为我的开源项目Maple-Boot项目的网站前端,因为项目主打的内容发布展示,所以其中的内容列表页会根据不同的菜单进行渲染不同的路由,本文降介绍Vue3动态路由变更页面不刷新的问题解决办法,需要的朋友可以参考下
    2024-07-07
  • 在浏览器console中如何调用vue内部方法

    在浏览器console中如何调用vue内部方法

    这篇文章主要介绍了在浏览器console中如何调用vue内部方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07

最新评论