Vue.2&Vue.3项目引入Element-UI教程&踩坑

说明：Vue.2 & Vue.3项目引入Element UI 时下载的组件库对应的是Element UI & Element  plus；

下面给出相应的方法和示例：

Vue.2引入Element-UI参考

Vue 2- Element UI 官方

 1.安装Element  UI：

npm i element-ui -S

  注意：有些npm版本过高或者过低的时候下载Echarts的过程中可能会报错，遇到这种问题可以在后面加上 --legacy-peer-deps试试！如下：

npm i element-ui -S --legacy-peer-deps

 2.引入Element  UI以及原生组件样式文件

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

 主要加入以下几行代码：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

 3.使用element ui 创建一个表格示例

​

  主要代码如下：

运行后如图：

​

 至此Vue.2引入Element-UI并使用教程结束！！！

Vue.3引入Element-UI

Vue 3- Element Plus 官方

  注意：element ui 官方文档上没有说明element ui不支持Vue.3版本,我也是自己测试了才知道，Vue.3引入element ui时，没有出现报错，但是运行后浏览器出现了白屏的问题，所以需要安装element plus。

1.安装Element  plus：

npm install element-plus --save

  注意：有些npm版本过高或者过低的时候下载Echarts的过程中可能会报错，遇到这种问题可以在后面加上 --legacy-peer-deps试试！如下：

npm install element-plus --S --legacy-peer-deps

 2.引入Element  plus以及原生组件样式文件

//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')

 主要加入以下几行代码：

//main.js
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(ElementPlus, { locale })

 3.使用element plus 创建一个表格示例

​

 主要代码如下：

运行后如图：

​

 至此Vue.3引入Element-UI并使用教程结束！！！

知识分享，持续更新，求关注不迷路~