vscode开发vue页面中点击组件跳转并打开组件的文件位置

已于 2024-03-18 22:09:45 修改
阅读量1.3k 收藏 7
点赞数 8
分类专栏： vue 文章标签： vue.js vscode javascript
于 2024-03-17 00:12:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xss12322/article/details/136773217
版权
本文介绍了如何在Vue项目中下载并配置Vue-Peek插件，以及在setting.json中使用VueHelper的alias功能来管理文件路径，解决导入文件时的具体问题。
摘要由CSDN通过智能技术生成

1： 下载插件

Vutur

vue-helper

2:  在setting.json中添加以下代码

 

"vue-helper.alias": { "@": "src" }
 

 

import ContentCard from '@/frontLayout/components/ContentCard/index';
 

 
 
路径要具体到文件名 index
 

 

 
 
tmd 奇怪了 有的行有的不行，有的具体到文件夹名就行 
 

 

 
 

3. 下载插件 Vue-Peek 

                

        

        

    

  


    

      

        

            

              
                
                  洗刷先生
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
vscode 之 vue项目如何使用ctrl+鼠标左键跳转对应文件

				
			

			

				

					zhuangvi的博客
				

				

					03-13
					
					6083
					
				

			

		

		

			
				
使用vscode插件，并在vscode的文件中配置别名路径跳转（配置看插件细节说明）配置看插件细节说明）},使用这两个插件的任意一个都可以，使用插件的话是要ctrl+点击from后面的路径，不能点击import后面的变量名，然后跳转到文件，并不是快速跳转到对应变量声明的位置。使用插件的方式更加偏向于用户使用的自定义安装插件，并不适合于团队协作，毕竟设置的文件是存在用户电脑的vscode里面的，并没有在代码项目工程上。

			
		

	



                

              
                



	

		

			

				
					
vscode开发vue页面中点击组件跳转并打开组件的文件位置_vscode vue点击跳转

				
			

			

				

					m0_61067876的博客
				

				

					04-15
					
					801
					
				

			

		

		

			
				
疯狂编程学习效果可视化写博客阅读优秀代码心态调整。

			
		

	



                


  
              

                


	

		

			

				
					
分享 VSCode 必备精品插件

					
最新发布

				
			

			

				

					博客不在多，在于能迎刃而解
				

				

					08-22
					
					1613
					
				

			

		

		

			
				
功能：在服务器端打开你的文件，实时显示你修改的代码，支持websocket 消息服务，可以用于调试websocket 客户端；使用：选中行，Ctrl+Shift+p 输入 翻译，键入 ctrl+`再按下 ctrl+1 为翻译直接替换选中区域。1.自动补全，跳转至样式和变量定义位置，创建 JSX/TSX 的行内样式，预览样式及变量内容，功能：常用于读源码进行标记行，跳转（代码标记快速跳转）功能：智能提示代码，可以预测你将要写的代码进行提示。功能：项目管理插件，当开发多个项目时，可以快速跳转。

			
		

	





	

		

			

				
					
vscode 实现组件之间的跳转

				
			

			

				

					
				

				

					02-09
					
					3379
					
				

			

		

		

			
				
1. 安装 vetur 和 vue-helper 两个插件
2. 打开设置 --> 扩展 --> vue helper, 然后在右边找到在 settings.json 中编辑，点击，添加或修改下面的配置：



 "vue-helper.alias": {
 "@": "src"
 },
 "vue-helper.componentPrefix": {
 "alias": "@",
 "path": "src"
 }
 

...

			
		

	



		

			
		



	

		

			

				
					
VScode点击方法能够自动跳转的插件

					
热门推荐

				
			

			

				

					maise6666的博客
				

				

					06-30
					
					1万+
					
				

			

		

		

			
				
VScode 点击方法名自动跳转的插件

			
		

	





	

		

			

				
					
vscode 点击import引用的组件直接跳转方法

				
			

			

				

					我是星星的博客
				

				

					02-21
					
					1587
					
				

			

		

		

			
				
搜索名称：别名路径跳转。

			
		

	





	

		

			

				
					
vscode怎么点击路径直接跳转对应文件

				
			

			

				

					qq_35946021的博客
				

				

					05-30
					
					2124
					
				

			

		

		

			
				
我们可用在js项目中创建一个 jsconfig.json文件，TS项目可以创建tsconfig.json。在vue项目中经常要引入工具类、组件、模版等，想要直接去看对应文件，只能自己找到对应路径再去打开。相对路径与绝对路径都能够直接跳转。

			
		

	





	

		

			

				
					
vscode 怎么根据组件名字或者路径跳到对应的文件

				
			

			

				

					qq_45086287的博客
				

				

					06-05
					
					437
					
				

			

		

		

			
				
下载插件 别名路径跳转 vue Jumper 不需要配置setting.json 重启vscode即可。当我们维护一些项目，项目中组件层层跌套，寻找起来非常麻烦。mac： command+点击。

			
		

	





	

		

			

				
					
vscode 开发vue常用插件

				
			

			

				

					06-05
				

			

		

		

			
				
对于Vue开发者来说，Volar极大地提高了开发Vue组件的效率和准确性。  5. **humao.rest-client-0.25.1.vsix**：REST Client插件使得在VSCode内可以直接发送HTTP请求变得简单。这对于测试API接口或者调试与后端交互的...

			
		

	





	

		

			

				
					
vscode中Vue别名路径提示的实现

				
			

			

				

					10-15
				

			

		

		

			
				
主要介绍了vscode中Vue别名路径提示的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

			
		

	





	

		

			

				
					
VSCODE通用插件+vue插件+react插件（2024版本）

				
			

			

				

					2401_84433769的博客
				

				

					04-29
					
					519
					
				

			

		

		

			
				
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

			
		

	





	

		

			

				
					
VSCode Vue开发推荐插件和VSCode快捷键(小结)

				
			

			

				

					10-14
				

			

		

		

			
				
 - General快捷键：这部分快捷键主要用于一般性的操作，如显示命令面板（Ctrl+Shift+P，F1）、快速打开文件（Ctrl+P）、关闭当前窗口或实例（Ctrl+Shift+W）等。   - Basic editing快捷键：基础编辑快捷键涉及文本的...

			
		

	





	

		

			

				
					
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法

				
			

			

				

					10-15
				

			

		

		

			
				
现在，当你在VSCode中创建新的`.vue`文件并输入“vue”，按Tab键，对应的模板就会被插入到当前文件中，大大提高了编写Vue组件的效率。  总结来说，VSCode的自定义代码片段功能为Vue开发者提供了极大的便利。通过定义...

			
		

	





	

		

			

				
					
VSCode引用跳转

				
			

			

				

					Fire Cicada
				

				

					01-20
					
					6108
					
				

			

		

		

			
				
VSCode引用跳转文件

			
		

	





	

		

			

				
					
vscode文件跳转（vue项目）

				
			

			

				

					前端少年
				

				

					11-09
					
					2055
					
				

			

		

		

			
				
vscode中，vue项目中的文件跳转方式记录。

			
		

	





	

		

			

				
					
vscode+vue开发常用插件整理

				
			

			

				

					浩星
				

				

					04-19
					
					2790
					
				

			

		

		

			
				
vscode新机开发常用插件整理。

			
		

	





	

		

			

				
					
vscode中vue项目点击链接，跳转对应引入模块

				
			

			

				

					qq_41231694的博客
				

				

					02-03
					
					3158
					
				

			

		

		

			
				
2、项目根目录中的jsconfig.json或者tsconfig.json（没有的话手动创建），第一个无法跳转到对应目录，第二个却可以。1、项目中配置@的alias别名。

			
		

	





	

		

			

				
					
vscode中前端vue项目详解_详解VSCode配置启动Vue项目_婳祎_前端开发者

				
			

			

				

					weixin_26907223的博客
				

				

					01-30
					
					1319
					
				

			

		

		

			
				
下载安装并配置VSCode随便百度上搜个最新的VSCode安装好后，点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展，这里要安装两个插件。1、vetur插件的安装该插件是"emmet.syntaxProfiles": {"2、eslint插件的安装eslint智能错误检测插件，在具体开发中作用很大，能够及时的帮我们发现错误。至于安装，同样打开插件扩展窗口输入eslint点击安装插件，...

			
		

	





	

		

			

				
					
在vscode中如何用vue实现页面跳转

				
			

			

				

					05-25
				

			

		

		

			
				
4. 在组件中使用 `router-link` 标签实现页面跳转：  ```     <h1>Home Page  <router-link to="/about">Go to About Page    ```  5. 最后，在组件中使用 `router-view` 标签来展示路由视图：  ```     <h1>About ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
洗刷先生

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值