探索Vue组件关系,Vuensight引领你的视觉之旅!
2024-05-29 12:14:16作者:蔡丛锟
Vuensight,一个强大的命令行工具,为你提供了Vue.js项目的组件关系和通信通道(如props、events和slots)的可视化展示。旨在帮助开发者在重构前或过程中通过图形化方式理解组件结构,轻松定位如哪个prop被哪个父组件使用,或是找出未使用的组件和通道。
项目介绍
Vuensight基于两个卓越的开源包构建:
- dependency-cruiser,用于构建依赖树。
- vue-docgen-api,用于解析Vue文件。
只需安装并运行,Vuensight就能将你的Vue项目转化为直观的图形表示,让你一目了然地了解整个项目架构。
快速上手
安装
你可以选择在目标项目本地安装:
npm i -D @vuensight/cli
或者全局安装,以应对多个项目的可视化需求:
npm i -g @vuensight/cli
运行
进入你的项目目录,然后执行:
vuensight
配置选项
可根据需要提供以下可选参数:
--dir
或-d
:指定解析的目录,默认为src
。--port
或-p
:自定义应用启动端口,默认为4444。--webpack-config
或-wpc
:指定webpack配置文件路径。--ts-config
或-tsc
:指定TypeScript配置文件路径。
示例用法:
vuensight --dir resources/js --port 9999 --webpack-config ./webpack-config.json --ts-config ./tsconfig.json
许可证
Vuensight遵循MIT许可证。
开发者信息
要求
确保你的npm
版本至少是7,因为这是一个使用npm工作空间的monorepo。
安装依赖
- 在根目录运行
npm i
安装所有包的依赖。 - 若要为所有包添加全局依赖,运行
npm i <package-name>
。 - 若要向特定包添加新依赖,运行
npm i <package-name> --workspace @vuensight/<vuensight-package-name>
。
构建
- 在根目录运行
npm run build
一次性构建所有包。 - 在每个包目录下单独运行
npm run build
。 - 使用观察模式,分别在每个包目录下运行
npm run build:watch
。
本地链接测试
在cli包中运行npm link
,然后在要测试的Vue项目中运行npm link @vuensight/cli
。确保正确设置Node版本,并在根目录中运行npm i
以使内部包关联。
单元测试
- 在根目录运行
npm run test
运行所有包的测试。 - 在单个包目录下运行
npm run test
。
发布
在每个包目录下运行npm publish
进行发布。
Vuensight是一款高效且直观的工具,它让Vue组件之间的复杂关系变得清晰明了。无论你是新加入项目的小白,还是经验丰富的老鸟,它都能成为你开发过程中的得力助手。现在就试试看,开启你的Vue项目探索之旅吧!
登录后查看全文
热门项目推荐
cherry-studio
🍒 Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端TypeScript039RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue3 & Vite、Element Plus 的前后端分离权限管理系统Vue0416arkanalyzer
方舟分析器:面向ArkTS语言的静态程序分析框架TypeScript041GitCode百大开源项目
GitCode百大计划旨在表彰GitCode平台上积极推动项目社区化,拥有广泛影响力的G-Star项目,入选项目不仅代表了GitCode开源生态的蓬勃发展,也反映了当下开源行业的发展趋势。03CS-Books
🔥🔥超过1000本的计算机经典书籍、个人笔记资料以及本人在各平台发表文章中所涉及的资源等。书籍资源包括C/C++、Java、Python、Go语言、数据结构与算法、操作系统、后端架构、计算机系统知识、数据库、计算机网络、设计模式、前端、汇编以及校招社招各种面经~015openGauss-server
openGauss kernel ~ openGauss is an open source relational database management systemC++0146
热门内容推荐
1 freeCodeCamp JavaScript高阶函数中的对象引用陷阱解析2 freeCodeCamp全栈开发课程中测验游戏项目的参数顺序问题解析3 freeCodeCamp音乐播放器项目中的函数调用问题解析4 freeCodeCamp 课程中关于角色与职责描述的语法优化建议 5 freeCodeCamp博客页面工作坊中的断言方法优化建议6 freeCodeCamp猫照片应用教程中的HTML注释测试问题分析7 freeCodeCamp论坛排行榜项目中的错误日志规范要求8 freeCodeCamp英语课程视频测验选项与提示不匹配问题分析9 freeCodeCamp课程页面空白问题的技术分析与解决方案10 freeCodeCamp课程视频测验中的Tab键导航问题解析
最新内容推荐
Visual-RFT项目中模型路径差异的技术解析 Beyla项目中的HTTP2连接检测问题解析 Microcks在OpenShift上部署Keycloak PostgreSQL的权限问题解析 RaspberryMatic项目中HmIP-BWTH温控器假期模式设置问题分析 Lets-Plot 库中条形图标签在坐标轴反转时的定位问题解析 BedrockConnect项目版本兼容性问题解析与解决方案 LiquidJS 10.21.0版本新增数组过滤功能解析 Mink项目中Selenium驱动切换iframe的兼容性问题分析 Lichess移动端盲棋模式字符串优化解析 sbctl验证功能JSON输出问题解析
项目优选
收起

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer(第 2 版)》、《程序员面试金典(第 6 版)》题解
Java
51
15

🎉 (RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
572
415

React Native鸿蒙化仓库
C++
125
208

openGauss kernel ~ openGauss is an open source relational database management system
C++
76
146

🍒 Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端
TypeScript
435
39

旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件,通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求,让密码技术应用更简单,同时探索后量子等先进算法创新实践,构建密码前沿技术底座!
C
98
253

前端智能化场景解决方案UI库,轻松构建你的AI应用,我们将持续完善更新,欢迎你的使用与建议。
官网地址:https://matechat.gitcode.com
693
91

FOLib 是一个为Ai研发而生的、全语言制品库和供应链服务平台
Java
74
5

🔥🔥超过1000本的计算机经典书籍、个人笔记资料以及本人在各平台发表文章中所涉及的资源等。书籍资源包括C/C++、Java、Python、Go语言、数据结构与算法、操作系统、后端架构、计算机系统知识、数据库、计算机网络、设计模式、前端、汇编以及校招社招各种面经~
119
14

本仓将收集和展示高质量的仓颉示例代码,欢迎大家投稿,让全世界看到您的妙趣设计,也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
298
1.03 K