您现在的位置是:网站首页> 编程资料编程资料
解决vue3使用element-ui的具体操作_vue.js_
2023-05-24
352人已围观
简介 解决vue3使用element-ui的具体操作_vue.js_
目前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获取当前行的值的问题
重传
如果使用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内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
您可能感兴趣的文章:
相关内容
- 小程序开发 page-container 页面容器弹出对话框功能的实现_javascript技巧_
- ElementUI table无缝循环滚动的示例代码_javascript技巧_
- 一文解决微信小程序button、input和image表单组件_javascript技巧_
- react中使用useEffect及踩坑记录_React_
- react进阶教程之异常处理机制error Boundaries_React_
- 使用vue控制元素显示隐藏方式_vue.js_
- Vue中使用Printjs插件实现打印功能_vue.js_
- 优雅处理前端异常的几种方式推荐_javascript技巧_
- React中路由参数如何改变页面不刷新数据的情况_React_
- vue项目Luckysheet的使用_vue.js_
