WebStorm教程--生成文件关系图

最新推荐文章于 2024-08-17 09:31:36 发布

WestLonely

最新推荐文章于 2024-08-17 09:31:36 发布

阅读量4.5k

点赞数 2

分类专栏：编辑器技巧

本文链接：https://blog.csdn.net/WestLonly/article/details/78978307

版权

编辑器技巧专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本人现在用的webstorm版本是2017.3.3;最近发现一个很强大的功能:Diagrams.利用这个功能,可以快速的生成指定文件夹下面的结构关系图;帮助我们阅读代码;

具体操作如下:在Project面板中邮件点击任一文件夹或文件,在倒数第二个选项中依次点击Diagrams →show Diagram,如下图,然后就是等待状态;等待加载完成就可以看了

点击上面的每个框选中,等鼠标指针编程十字的时候,就可以拖动改变模块的位置了;

工具栏菜单如下:

从左到右依次为:切换视图,放大,缩小,恢复默认比例;适合当前窗口,使用当前布局,保存,导出(导出支持常见的图片格式);打印等

tips : 如果项目视图比较负责,图片显示比较密集,可以按住Alt键可以使用放大镜功能.

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

WestLonely

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

WebStorm项目目录结构

weixin_52976120的博客

01-04

678

项目核心文件夹：包括项目代码，各种静态资源等，是我们开发的重点工作目录。babel的配置文件，babel主要作用是将ES6+的语法改为ES5。存放公共资源和项目的主入口文件 index.html。小组件，一般做子组件，对应view中页面级别大组件。项目配置，用于管理项目的低赖性，脚本，版本等。项目资源，imange图片，视频，音频等。项国介绍文件，对项目的主要信息进行描述。是根组件，所有内容都在它里面.项目依赖都会下载到这个地方。git配置上传时忽略文件。

前端开发工具WebStorm使用教程（五）：配置项目结构

励志做最业余的专业博主，控件产品可以私我~

04-21

1597

在内容根目录中，WebStorm 可以区分包含您编辑的源代码的文件夹和包含其他类型的内容的文件夹。在 WebStorm 中，content是你当前正在使用的文件的集合，可能被组织在一个子文件夹的层次结构中。请注意，按名称模式排除的文件夹在“项目”工具窗口中标记为已排除，但不会添加到“排除的文件夹”列表中。若要添加内容根目录，请单击右侧窗格中的“添加内容根目录”，然后在打开的对话框中选择所需的文件夹。右键单击“项目”工具窗口中的文件夹，从上下文菜单中选择“将目录标记为”，然后选择所需的类别。

2 条评论您还未登录，请先登录后发表或查看评论

使用WebStorm进行高效的全栈JavaScript开发

最新发布

vvvae1234的博客

08-17

996

WebStorm是由JetBrains出品的一款强大的JavaScript IDE，适用于开发现代的Web应用程序。它提供了一系列特性，包括智能代码补全、实时错误检查、调试工具、版本控制集成以及支持多种前端和后端框架（如React、Angular、Node.js等）。这些强大的功能使得WebStorm成为全栈JavaScript开发的理想选择。

vue-cli入门（二）——项目结构

weixin_34413802的博客

04-21

786

前言在上一篇项目搭建文章中，我们已经下载安装了node环境以及vue-cli，并且已经成功构建了一个vue-cli项目，那么接下来，我们来梳理一下vue-cli项目的结构。总体框架一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解一下即可。文件结构细分 1.bui...

gephi生成网络关系图_Gephi快速入门–《追风筝的人》人物关系图谱

weixin_39594103的博客

11-30

1587

Gephi是一款基于JVM的开源网络分析软件, 其主要用于各种复杂网络系统，动态和分层图的交互可视化与探测，即：探索性数据分析，链接分析，社交网络分析，生物网络分析等。1.打开图形文件常见图形文件格式有：gehi输入格式以CSV格式为例，选择【文件->新建项目】，然后选择【数据资料】工具栏按钮，在出现的数据表格面板中，选中【边】，选择【输入电子表格】，在弹出的对话框中，选择准备好的文件：追风...

WebStorm生成Vue的组件关系图

u012632105的博客

12-30

510

快捷键：Ctrl+Alt+U

使用TS时，在Redux中类型声明的各文件关系图

m0_58447769的博客

11-28

319

以下均为固定套路

webstorm模板快速生成

阿嚏乱码的地方

01-07

1396

前言我们在使用webstorm开发项目的时候，有时会重复写多个很相似的代码块，经常要从别的代码处复制粘贴后修修改改。那么能不能将这些重复经常写的代码块抽象出来输入一行命令就能展示呢？可以，webstorm内置了这个功能，我们来说下如何使用。步骤 1、在webstorm设置中搜索live templates 2、找到需要设置的模板类型，我这里选择的是JavaScript（typeScript也包含在js模板设置中）， 3、添加模板，输入你要取的快捷名，模板介绍等等。...

06 Vue项目结构：在WebStorm中查看和了解项目

巅峰键盘侠

08-26

1190

使用WebStorm或者命令行创建好Vue项目后，它就是一个典型的工程化项目了，这里以WebStorm为例展示一个我目前正在开发的商业项目，项目结构如下图所示：上图中，箭头指向的左侧红色框内就是Vue工程化项目的完整结构，这里讲解几个最核心的目录和文件：（1）/index.html 文件项目入口文件，一般不需要修改（2）/src 目录项目源码存放目录（3）/config...

Cesium中文教程-Cesium and Webpack

newston的博客

06-18

2849

目录前提条件(Prerequisites) 创建一个基本webpack应用(Create a basic webpack app) 使用npm初始化应用程序(Initialize an app with npm) 创建应用程序代码(Create our application code) 安装和配置webpack(Install and configure webpack) 打包应用程序(Bundle the app) 运行开发服务器(Run the development server)

使用反汇编工具IDA查看动态库的汇编代码上下文，结合安卓系统生成的Tombstone文件，排查安卓app程序底层C++库的崩溃问题

热门推荐

dvlinker的技术专栏

08-14

3万+

使用IDA反汇编工具查看汇编代码上下文，结合安卓系统自动生成的Tombstone文件，去分析安卓app程序底层C++模块的崩溃问题。

深入理解Vue-cli搭建项目后的目录结构探秘

12-01

我最近也在研究Vue-cli的路上，今天了解一下Vue-cli目录结构，那么今天也算个学习笔记吧！一、前言这里先说一下使用vue-cli之前的事情。由于刚刚接触Vue不久，就接到了一个移动端项目，于是打算使用vue来进行一次尝试，所以按照练习时候的样子，emmm先把vue.js引入网页里来，emmm自己的外联main.css样式引进来，还有自己的main.js文件，还有一些图片布拉布拉的，所以我整个项目的结构如下：（捂脸） ├── css ├── images ├── index.html └── js 由于之前我连路由，组件什么的都不会用，所以项目效果可想而知，连点击文章标题显示

利用webstrom调试Vue.js单页面程序的方法教程

10-19

源映射是一个记录项目源码和打包后文件之间映射关系的文件，它允许浏览器调试工具显示源码而不是打包后的代码，从而使得调试过程更为方便。配置devtool选项为'source-map'即可。知识点四：WebStorm中的断点调试要...

用echarts制作红楼梦关系图——保姆级教程（照做可出结果）

zgmssy的博客

03-20

1159

/ 为复选框添加事件监听});});// 搜索功能});});});// 找到搜索节点对应的所有关联节点});// 去重// 将搜索到的节点以及其关联节点添加到结果中if (!});});});});} else {alert('未找到匹配节点。');// 更新图表数据});// 更新图表数据});t=N7T8。

vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019

PGguoqi的博客

04-19

8822

未完

js ide WebStorm 使用总结

sdfhncfw的博客

11-08

589

js ide WebStorm 使用总结

Webstorm 创建文件使用模板自动生成代码

老孟Flutter

03-31

9686

打开File->Setting，弹出如下：选中JavaScript File:/** * Created by mqd on ${DATE}. */import React, {Component} from 'react'; import { StyleSheet, View, } from 'react-native';export default class ${NAME}

如何生成模块中的头文件引用关系图

weixin_54516968的博客

10-24

2016

当拿到一个模块的代码，我们自然而然的想要生成了解代码中的模块调用关系。那么下面的脚本就是生成了模块之间的调用关系，图示如下：# 原理使用dot画图因此，写一个脚本生成如上的dot文件，然后调用dot命令则可生成模块中的关系图。

OS_文件&文件系统

xuchaoxin1375的博客

05-24

1448

文章目录OS_文件&文件系统文件系统&文件基础概念文件&记录&数据项关系图文件的逻辑结构&物理结构文件的结构文件逻辑结构特点文件逻辑结构分类有结构文件无结构文件(特殊的有结构文件)有结构文件的分类(1)顺序文件(1)串结构。(2)顺序结构。(2)索引文件(3)索引顺序文件记录寻址隐式寻址显式寻址方式两种方式对定长记录实现随机访问索引文件(IndexFile)具有多个索引表的索引文件索引文件的主要优点其他特点索引顺序文件(IndexSequentialFile)一级索引

webstorm element-plus

08-19

要在WebStorm中使用Element Plus，你需要先通过命令行工具将Element Plus安装到你的Vue项目中。你可以使用以下命令之一来安装Element Plus： 1. 使用npm： ``` npm install element-plus --save ``` 2. 使用yarn： ``` yarn add element-plus ``` 3. 使用pnpm： ``` pnpm install element-plus ``` 接下来，你需要在你的Vue项目的`main.js`文件中引入Element Plus。你可以按照以下步骤操作： 1. 在`main.js`文件中导入`createApp`函数和Element Plus： ```javascript import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' ``` 2. 在`main.js`文件中创建Vue应用实例并使用Element Plus插件： ```javascript const app = createApp(App) app.use(ElementPlus).mount('#app') ``` 这样就成功将Element Plus引入到你的Vue项目中了。关于如何在Vue组件中使用Element Plus的具体示例，你可以在Element Plus官方文档中找到对应的组件代码。你可以从官网复制相应的组件源代码，然后将其粘贴到你的Vue组件中进行使用。123 #### 引用[.reference_title] - *1* *3* [WebStrom创建Vue3+Element-Plus项目](https://blog.csdn.net/weixin_45580378/article/details/126912660)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [Web篇_06 搭建Vue项目（Vue3+Element Plus+Vue-cli+Webstorm）](https://blog.csdn.net/qq_58099084/article/details/124702197)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]