关于VUE3.0引入element-ui页面空白问题

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

这边切换到项目目录下面然后将element-plus添加

yarn add element-plus

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

    
    

      
      

       
       

      
      
      
      

       
       

        
        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.csdn.net/fucaiwei/article/details/113179889

</article>