Vue与element联动踩过的坑

vue最新版本中创建的实例对象是createApp

而我们正常按照官方文档进行安装的element-ui，只支持实例对象为Vue

所以问题就出在了这里

如果你的实例对象是Vue的话，

vue create my-app

cd my-app

vue add element

然后再在main.js中引入即可


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) });

如果你的实例对象是createApp，

我看别的大佬都教你降低版本，让你卸载，安一个兼容的版本


我就不一样了直接用element-plus的方法来引入element-ui就好了嘛

vue create my-app

cd my-app

vue add element-plus

npm install vue-cli-plugin-element-plus

在main.js中

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'element-ui/lib/theme-chalk/index.css'
import installElementPlus from './plugins/element'

const app = createApp(App)
installElementPlus(app)
app.use(store).use(router).mount('#app')

下面我以走马灯（轮播图示例如何使用）

<template>
<div id="swiper">
 <el-carousel height="300px" id="imgs">
   <el-carousel-item  v-for="(item,index) in banners" :key="index">
     <a :href="item.link">-->
           <img :src="item.image" alt="">
     </a>
   </el-carousel-item>
 </el-carousel>
</div>
</template>

好了，散会！