vue3使用element ui的方法实例

vue3出来好一段时间了,一直想着用一下,下面这篇文章主要给大家介绍了关于vue3使用element ui的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

element-ui支持vue2版本，当用vue3安装element-ui的时候会报错，这就需要安装element-plus版本来用到vue3项目中。

element-ui网址：https://element.eleme.cn/#/zh-CN/

element-plus网址：https://element-plus.gitee.io/zh-CN/

1、首先安装element-plus

npm install element-plus --save

可以在package.json中检查是否安装成功

出现这一行就证明安装成功了...

2、修改main.js或main.ts文件

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(scroll).use(ElementPlus, { locale }).mount("#app");

3、然后在代码中使用

然后应该就可以了...

4、有的会出现报错，那就再安装一下element ui

npm install element-ui -S

补充：新引入Element Plus

npm install element-plus --save

main.js中引入

import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' // import '@/assets/scss/reset.scss' import ElementUI from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' createApp(App).use(store).use(router).use(ElementUI).mount('#app')

启动后，项目能正常显示。