webstorm中实现vue 项目按住ctrl+引用组件名自动跳转到对应组件

最新推荐文章于 2024-06-21 23:30:00 发布
最新推荐文章于 2024-06-21 23:30:00 发布
阅读量5.1k 收藏 6
点赞数 6
分类专栏： vue webStorm 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yede0632/article/details/106692097
版权

webstorm中实现vue 项目按住ctrl+引用组件名自动跳转到对应组件。
实现原理：配置webstorm的webpack配置文件，即在webstorm的设置中
在这里插入图片描述
在vue 2.0中webpack configuration file中选择文件目录如下：
**

项目目录/build/webpack.base.conf.js

**
在vue 3.0 中webpack configuration file中选择文件目录如下：

项目目录\node_modules@vue\cli-service\webpack.config.js

lulu_0632
关注
  • 6
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
10-19
在本文中，我们将深入探讨如何在WebStorm中为Vue.js单文件组件添加高亮显示和语法支持，这对于Vue开发者来说是非常实用的技巧。Vue.js是一个流行的前端框架，而WebStorm是一款强大的JavaScript集成开发环境（IDE），...
webstorm搭建vue项目（新手参考）
01-20
安装webstorm 首先安装webstorm，因为webstorm 集成了多种版本控制工具，基本的功能都可以使用，比如git。同时它也支持node.js调试，对于学生也有免费的优惠，稍后会讲如何申请。 webstorm官网 自己选择要安装的...
在webstorm中实现在vue项目中通过别名@实现点击跳转对应方法或文件
qq_36609655的博客
10-13 2775
'use strict' const path = require('path') function resolve (dir) { return path.join(__dirname, '.', dir) } module.exports = { context: path.resolve(__dirname, './'), resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': reso.
Webstorm vue项目@路径不能跳转到对应资源,提示Cannot find declaration to go to
最新发布
IT小辉同学
06-21 694
伸手需要一瞬间，牵手却要很多年，无论你遇见谁，他都是你生命该出现的人，绝非偶然。——若无相欠，怎会相见。
webstorm设置点击文件路径快捷跳转
u010606701的博客
02-22 2967
1、点击左上角File -> settings 2、搜索webpack 3、选择当前项目下 node_modules@vue\cli-service\webpack.config.js
WebStrom快捷键使用方式
web工程师——小发发
02-03 214
ctrl+ ‘-/+’：可以折叠项目中的任何代码块，它不是选中折叠，而是自动识别折叠。 ctrl+shift+n：打开工程中的文件，目的是打开当前工程下任意目录的文件。 ctrl+j：输出模板 ctrl+b：跳转到变量申明处 ctrl+[]：匹配{}[] ctrl+F12：可以显示当前文件的结构 ctrl+x：剪切（删除）行，不选中，直接剪切整个行，如果选中部分内容则剪切选中的内容 alt+left/right：标签切换 ctrl+r：替换 ctrl+shift+up:行移动 shift
webstrom绝对路径，快速定位到相关组件
往后余生的博客
06-08 1853
在使用webpack构建项目的时候，配置一些绝对路径之后，想快速导航到目的文件的时候，比较麻烦，比如import Util from 'util'而这个util是webpack中设置好了，这时， 我们还需要看webpack的一些相关配置才行。下面就是解决这个问题的 file => settings => languages & feameworks => javasc...
2.0 webStorm 部分快捷键 + el-table 表头内容居中对齐 +上传组件按钮 普通按钮 在一行
xumengxia的博客
11-12 698
Ctrl + shift + R 快速全局查找 Ctrl + f 搜索 （word）精准查询 Ctrl + R 替换 web Storm 使用git 项目根目录 —— 右击 Git —— +Add —— 保存到本地 项目根目录 —— 右击 Git —— Repository —— pull （提交之前先拉下来） pull 不成功 需要 Git —— Repository —— stash Change 隐藏一下 pull成功后 —— unStash 勾选POP stash —— POP st.
webstorm+vue初始化项目的方法
12-12
在IT行业中，WebStorm是一款备受推崇的JavaScript和前端开发IDE，它提供了丰富的功能，包括代码自动补全、语法高亮、版本控制集成等。Vue.js则是一个轻量级的前端框架，以其简单易用和高性能著称。Vue CLI（命令行...
webstorm 编辑器中使用“@/“ 引入路径无法识别 有波浪线 问题
qq_45631770的博客
07-24 2381
解决编辑器使用@引入路径报错的问题。
【插件】webstorm 常用插件 好用的插件分享
qq_41287158的博客
04-25 2万+
下面分享部分自用的好用的webstorm插件 1. 中文插件 我这里是已经安装了中文插件的了。英文版的操作是一样的 File -> Settings->Plugins->搜索 chinese 即可 操作步骤如下： 安装完成之后重启Webstorm即可 2. 图标插件 个人觉得系统默认的图标不是很好看，所以去插件市场找了一个图标插件。 插件的名字： Atom Material Icons 操作步骤如下： 3. 翻译插件 对于英语不是很好的开发者，在取变量名或者文件名字的时候会犯难.
【webstorm 中的快捷键大全(知识点超全的详解版本)】
Hey_Coder
05-17 1万+
webstorm 中的快捷键使用方法webstorm 中的快捷键使用方法1.webstorm 中的快捷键的查看和修改2. webstorm 中的快捷键的使用分类2.1 编辑器操作 的快捷键2.2 主菜单类 快捷键⑴ 文件，编辑，导航，书签 的快捷键 webstorm 中的快捷键使用方法 1.webstorm 中的快捷键的查看和修改 如何查看 webstorm 中有哪些快捷键？ file → setting → keymap （汉化版：文件 → 设置 → 快捷键） 点开后，可以看到很多 快捷键对应的操
webstorm中vue项目import的内容不能直接ctrl+鼠标点击跳转（若依等vue项目）
专栏
11-09 5214
方法： 1、file -> Settings -> Languages&Frameworks -> Javascript -> Webpack 2、点击文件夹图标，找到该项目所在位置，打开下图文件 3、按步骤找到webpack.config.js，选中 4、依次点击OK、Apply 5、小加载一会，点击import引入的内容，就会进行对应的跳转啦！ ...
webstorm使用配置技巧（Vue版）
u012574599的博客
03-01 5044
webstorm配置使用技巧（vue版）
webstorm vue项目@路径不能跳转到对应资源,提示Cannot find declaration to go to
weixin_43123984的博客
09-15 4151
webstorm vue@跳转相应路径文件
vue点击按钮实现跳转到另一个vue页面
热门推荐
changyana的博客
10-11 2万+
首先需要对按钮绑定一个函数，然后在函数里进行页面路由的改变。这里要确保项目中已经在使用vue-router。
webstorm vue项目import @xx.js引用无法跳转
闲人一小枚
09-12 1518
mac设置 webStorm -> preferences -> Languages & Frameworks -> JavaScript -> Webpack windows设置 file -> Settings -> Languages&Frameworks -> Javascript ->​​​​​​​Webpack
webstorm不识别vue组件中的antd组件标签
06-10
如果 WebStorm 不识别 Vue 组件中的 antd 组件标签，可能是因为 WebStorm 没有正确地识别 Vue 单文件组件中的 template 标签。你可以尝试在 WebStorm 中进行以下操作来解决这个问题： 1. 确认你的项目已经安装了 antd 和 vue 库，并且已经正确地导入了这些库。 2. 在 WebStorm 中打开你的 Vue 单文件组件，然后在顶部的 `<template>` 标签中尝试输入一个 antd 组件标签。 3. 如果 WebStorm 没有正确地识别 antd 组件标签，可以尝试在 `<template>` 标签上方添加如下代码： ```vue <template lang="jsx"> </template> ``` 这样可以让 WebStorm 正确地识别 JSX 语法，从而正确地识别 antd 组件标签。 4. 如果你已经添加了 `<template lang="jsx">` 标签但是还是遇到了问题，可以在 WebStorm 中打开项目设置，然后在左侧面板中选择 Languages & Frameworks > Vue，将 JavaScript language version 设置为 React JSX。 5. 点击 OK 按钮保存设置。 6. 现在，WebStorm 应该能够正确地识别 Vue 组件中的 antd 组件标签了。你可以在代码中尝试输入一个 antd 组件标签，看看是否能够正确地识别。 如果你还是遇到了问题，可以尝试重启 WebStorm 或者清空 WebStorm 的缓存。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值