element plus安装引入使用大坑

最新推荐文章于 2024-03-23 21:47:50 发布
VIP文章 最新推荐文章于 2024-03-23 21:47:50 发布
阅读量2.4k 收藏 1
点赞数 2
分类专栏： 安装错误 文章标签： elementui vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45642452/article/details/124469690
版权

最近做毕设，准备用vue写前端，自然用到了elementplus,处处踩雷必须记录。
首先是版本对应，vue2对应element-ui,vue3对应element-plus，强行安装只会出错，另外安装的时候需要把已经npm run的项目停下来，否则安装的依赖会因为无法进入package.json而引入失败。
关于使用，由于我的main.ts文件是在创建项目的时候自动生成的，所以它的app声明只有一句

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

所以，为了正常引入element-plus，会想到先拆开，再添加


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  weixin_45642452
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
移动端登录界面，使用vue,element-plus

				
			

			

				

					08-16
				

			

		

		

			
				
移动端登录界面

			
		

	



                

              
                



	

		

			

				
					
element-plus离线文档

				
			

			

				

					05-07
				

			

		

		

			
				
element-plus离线文档，node服务已经配置好，直接node server.js即可使用，可以在内网部署，已经部署成功。

			
		

	



                


  
              

                


	

		

			

				
					
Element Plus 基本使用

					
最新发布

				
			

			

				

					qq_62377885的博客
				

				

					03-23
					
					1972
					
				

			

		

		

			
				
Element Plus 基本使用官网地址element-plus 基本使用具体部署请看。

			
		

	





	

		

			

				
					
element plus 手册离线

				
			

			

				

					03-25
				

			

		

		

			
				
element plus离线

			
		

	



		

			
		



	

		

			

				
					
【Vue.js】873- Vue 3.0 进阶之指令探秘

				
			

			

				

					pingan8787
				

				

					02-18
					
					779
					
				

			

		

		

			
				
在 Vue 的项目中，我们经常会遇到 v-if、v-show、v-for 或 v-model 这些内置指令，它们为我们提供了不同的功能。除了使用这些内置指令之外，Vue 也允许注册自定义指...

			
		

	





	

		

			

				
					
vue3 No known conditions for “./lib/locale/lang/zh-cn“ specifier in “element-plus“ package

				
			

			

				

					flhhly的博客
				

				

					10-27
					
					1978
					
				

			

		

		

			
				
网上找了各种办法，或者问AI，回答都是element plus版本问题，经过版本升降之后，该问题并没有解决。前言：打包一个vue3+ts+vite+element plus项目的时候，一直报错，报错如下。

			
		

	





	

		

			

				
					
No known conditions for “./lib/locale/lang/zh-cn“ specifier in “element-plus“ package [plugin vite:d

				
			

			

				

					屹想天开
				

				

					07-31
					
					8794
					
				

			

		

		

			
				
The plugin "vite:dep-scan" was triggered by this import

			
		

	





	

		

			

				
					
vue注册了却没有使用的错误： component has been registered but not used

				
			

			

				

					idiot_MAN的博客
				

				

					09-21
					
					4669
					
				

			

		

		

			
				
如果执行了上面的操作，还是运行不了vue文件。解决办法2：修改项目的package.json。即可：然后关闭vscode，重新启动项目。在package.json中找到。

			
		

	





	

		

			

				
					
element-plus版本升级导致编译失败

				
			

			

				

					qingchen191的专栏
				

				

					07-19
					
					8659
					
				

			

		

		

			
				
element-plus 2.3.8版本升级带来了一个大坑

			
		

	





	

		

			

				
					
vue 3.0 使用element-plus按需导入方法和报错解决

				
			

			

				

					曈欣的博客
				

				

					12-31
					
					3011
					
				

			

		

		

			
				
TypeError: AutoImport is not a function ；TypeError: Components is not a function

			
		

	





	

		

			

				
					
Internal server error: No known conditions for “./lib/locale/lang/zh-cn“ specifier in “element-plus“

				
			

			

				

					weixin_56445766的博客
				

				

					07-19
					
					3668
					
				

			

		

		

			
				
Internal server error: No known conditions for "./lib/locale/lang/zh-cn" specifier in "element-plus" package问题解决，导致原因:element-plus 版本不兼容，回退老版本即可（我的：2.3.8->2.3.4）

			
		

	





	

		

			

				
					
element-plus-2.2.12 本地资源文件

				
			

			

				

					08-01
				

			

		

		

			
				
element-plus-2.2.12 本地资源文件，适用于Vue 3编程，是流行的Vue 3的组件库。 资源适用于离线开发，内网使用。 （本资源为 element-plus-2.2.12 保存而来，如有侵权请联系我删除。）

			
		

	





	

		

			

				
					
vue element项目引入icon图标的方法

				
			

			

				

					08-27
				

			

		

		

			
				
主要介绍了vue element项目引入icon图标的方法,本文图文并茂给大家介绍的非常详细，需要的朋友可以参考下

			
		

	





	

		

			

				
					
【Vue.js】892- Vue 3.0 进阶之动态组件探秘

				
			

			

				

					pingan8787
				

				

					03-09
					
					1311
					
				

			

		

		

			
				
本文是 Vue 3.0 进阶系列 的第四篇文章，在这篇文章中，阿宝哥将介绍 Vue 3 中的内置组件 —— component，该组件的作用是渲染一个 “元组件” 为动态组件。如果你对动态...

			
		

	





	

		

			

				
					
No known conditions for “./lib/locale/lang/zh-cn“ specifier in “element-plus“ package

				
			

			

				

					weixin_44106635的博客
				

				

					07-27
					
					2994
					
				

			

		

		

			
				
用npm 运行项目发生报错。

			
		

	





	

		

			

				
					
Element-Plus：No known conditions for “./lib/locale/lang/zh-cn“

				
			

			

				

					q1003675852的博客
				

				

					12-01
					
					2719
					
				

			

		

		

			
				
【代码】Element-Plus：No known conditions for “./lib/locale/lang/zh-cn“

			
		

	





	

		

			

				
					
vue3安装element plus报错code ERESOLVE

				
			

			

				

					m0_69056243的博客
				

				

					09-06
					
					437
					
				

			

		

		

			
				
安装element puls时加上 --legacy-peer-deps即可解决。这种报错是因为npm版本高了导致的。

			
		

	





	

		

			

				
					
vue3 引入ElementPlus 报错解决方法

				
			

			

				

					m0_70211164的博客
				

				

					08-17
					
					2267
					
				

			

		

		

			
				
然后就报错了其实很简单，就是降低一下的版本，我们不指定版本它默认会安装最新的版本，我们可以降一下版本，然后说一下我的版本 。我们去看一下npm版本页面我们就挑一个最近下载量比较高的版本,更新一下即可。


然后我们就成功了。当然我们也可以试一下另一种解决方案，这个作者也没试过，看别人是可以成功的，有想用这个的，可以自己去试一试。


最后

如果本篇文章对你有帮助，麻烦点个赞，谢谢。

			
		

	





	

		

			

				
					
Element-Plus：No known conditions for ./lib/locale/lang/zh-cn

				
			

			

				

					m0_74542701的博客
				

				

					01-02
					
					748
					
				

			

		

		

			
				
【代码】Element-Plus：No known conditions for ./lib/locale/lang/zh-cn。

			
		

	





	

		

			

				
					
全局引入element-plus怎么使用图标

				
			

			

				

					06-11
				

			

		

		

			
				
要使用Element Plus图标，需要先引入Element Plus和Element Plus图标库。在Vue项目中，可以在main.js中全局引入Element Plus和Element Plus图标库，代码如下：

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import 'element-plus/lib/theme-chalk/display.css' // 引入Element Plus的display样式
import 'element-plus/lib/theme-chalk/el-icon.css' // 引入Element Plus的icon样式

createApp(App).use(ElementPlus).mount('#app')
```

引入Element Plus图标后，可以在模板中使用`el-icon-*`样式来显示对应的图标。例如，要使用“搜索”图标，可以在模板中写入以下代码：

```html
<i class="el-icon-search"></i>
```

这样就可以显示“搜索”图标了。Element Plus支持的所有图标可以在官方文档中查看，链接如下：

https://element-plus.gitee.io/#/zh-CN/component/icon

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值