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