vue3/vue-cli4x 引入elementui面显示空白

vue3.x/vue-cli4.5 引入elementui后页面显示空白

相信用过Vue2创建项目的都是知道引用elementui

1官网说明 :https://element.eleme.cn/#/zh-CN/component/quickstart

npm i element-ui -S

安装完后就以官网案例代码就可以用了

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

今天就直接用 vue3(默认为最新版本) 创建项目后着以前的操作如

1、vue create vue-admin  //选择vue3

2、vue add element //vue-cli 加载 element

生成main.js如下代码：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'

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

./plugins/element.js

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element)

对比一下都觉得不对

运行时就是空白，注释./plugins/element.js 后又可以正常，又得细看文档百度才发现官网百年原来也有说明如如下图：

2官网说明 :https://element-plus.gitee.io/#/zh-CN/component/installation

这次是得注意安装 element-plus

npm install element-plus --save

 最后安装后官网代码案例为：

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

测试成功！本文章为个人学习日常记录，提供新手学习参考

文章来源个人博客： https://blog.cssscz.com/2441.html