不用跑项目,组件效果所见即所得,绝了!
作者 | 零一
来源 | 前端印象
大家好,看到一个好东西,忍不住来分享一下。
我们在写需求时都会封装一些组件,然后会为该组件定义一些 props
,使其跟业务分离,变得更通用。写完组件后需要验证一下组件的效果,也就需要简单 mock
一下数据传进去,然后跑一下项目看一下
// components/card/index.tsx Card 组件
// 咱先来写个组件
export default function Card (props) {const { name } = propsreturn (<div>{name}</div>)
}
// index.tsx 项目根目录
// 组件写好了,找个地方引入一下,传点数据进去,免得项目崩了
import Card form 'card'
export default function App () {return (<Card name="零一" />)
}
$ # 跑一下项目,看看刚才写的组件的效果
$ yarn dev
这套流程,你是不是很熟悉?大家可能都是这么干的,看完效果后还要回过头去把刚刚不要的测试代码都删掉
然而,我找到了一个非常好用的 Vscode 插件 大大简化了这个流程!!!!
它就是 Preview.js ,一个用于项目中组件实时预览的插件
它有什么优点?
支持
React(v16+)
、Vue2
、Vue3
、SolidJS
,并即将支持Preact
和Svelte
无需启动项目,直接静态预览组件效果
自动识别组件
自动生成 props 的 mock 数据
实时刷新,无需疯狂点保存触发
可以针对同一个组件生成多个预览,并可快速切换
支持调整页面比例,以及切换不同分辨率的设备
暗黑模式切换
直接搜索项目中的其它组件,快速切换
香不香?我反正已经上手使用过了,是真的香!之前我自己也做过组件库的项目,写完一个组件,就需要写一个 example
去看看效果,要是用了这个插件,项目也不用跑,实时预览,该有多爽啊(正在开发组件库的同学看过来,福利啊)
再讲一下这个插件的缺点
插件是刚出的,可能会有一些bug,这是难免的
上述优点中,6、7、8都是需要付费的,不过目前可以白嫖,等会讲
待发现...
但我目前用下来是没啥问题的
接下来带大家体验一下
安装
直接在 VsCode 的插件市场搜索:Preview.js
,安装即可
然后最好重启一下 VsCode
emmmm,大多数同学应该会收到这样一条报错信息:
因为重启后的初始化阶段,Preview.js
插件会安装一些依赖包,并且它们最低支持的 npm
版本是 7+
,估摸着大部分同学的 npm
包都是小于 7 的,所以还是建议大家想要使用时切换一下 node
版本,比如用 nvm use 17.5.0
,此时的 npm
版本就到了 8+
了,满足了需求,此时还需要重启一次
稍微耐心等待几秒钟,等它的依赖包都装好就ok了
基本使用
为了方便起见,我就拿
React
的代码来做示例了,但刚才提到那些库也都是支持的哈,大家可以自行尝试
咱们随便找到项目中的一个组件打开
可以看到,插件自动识别到了我的 Card
组件,并在上方悬浮了一个 Open Card in Preview.js
的灰色按钮,点击以后右边就会出来一个预览窗口了(此时咱们都还没启动项目)
还能看到,右下角也帮我们生成了该组件需要的 props
的 mock 数据,不过这个前提条件是你项目是 TS 的,并且给 props 限定了类型才行,否则是不行的(我试过了)
一切(新增组件、修改文本、修改样式...)的修改都是实时的(除了修改 props 类型),我们来看一下
类型修改不能实时也算是一个小缺点,希望后续可以改进一下。如果咱们改了类型,目前只需重启预览窗口就可以了,点底部的刷新是没用的
Pro 级别的功能
接下来是高级用户可以使用的功能,我看到他们官网是有申请 30 天免费体验资格的,为了本文的效果,我先申请了
申请网址:https://previewjs.com/checkout
填一下自己的邮箱,就申请成功了
然后它会把一个兑换码发到你的邮箱里
拿着这个码去 VsCode 的 Preview.js 预览窗口里填写即可
然后就成功了,页面现在多了一堆功能
来统一体验一下吧
总结
总体来说这个插件已经很 nice 了,即使不用付费版本的功能,也可以满足基本的需求,而且这个功能在写业务时非常有用,大大提高工作效率,真的真的强烈推荐!!!!
Preview.js: https://previewjs.com/
往期推荐
如果让你来设计网络
70% 开发者对云原生一知半解,“云深”如何知处?
一把王者的时间,我就学会了Nginx
如何在 Kubernetes Pod 内进行网络抓包
点分享
点收藏
点点赞
点在看
不用跑项目,组件效果所见即所得,绝了!相关推荐
- 不用跑项目,组件效果所见即所得,绝了~
大家好,我是零一,看到一个好东西,忍不住来分享一下. 我们在写需求时都会封装一些组件,然后会为该组件定义一些 props ,使其跟业务分离,变得更通用.写完组件后需要验证一下组件的效果,也就需要简单 ...
- Unity3D制作LED滚动字幕(跑马灯)效果
Unity3D制作LED滚动字幕(跑马灯)效果 搭建场景 建立世界坐标的Canvas 新建LED模型 Text节点 Mask节点 查看效果 美化一下 编写代码 DOTween插件 设置属性 编写文字滚 ...
- 灵异问题,使用EasyConnect后,用navicat可以访问数据库,但是用Idea跑项目连接超时怎么办?
背景 用EASY CONNECT连公司内网后,使用navicat和其他的数据库管理工具可以连接成功,但是使用Idea跑项目时,却一直报连接超时.(不过mac下却不用任何配置就能正常访问) 解决办法 一 ...
- 服务器跑项目,如何使用远程服务器跑项目
如何使用远程服务器跑项目 内容精选 换一换 远程桌面协议(Remote Desktop Protocol,RDP),是微软提供的多通道的远程登录协议.本节为您介绍如何使用RDP文件远程登录Window ...
- unity给头发添加物理_不需要写代码,直接在unity实现手机可以跑的毛发效果
马上注册,加入CGJOY,让你轻松玩转CGJOY. 您需要 登录 才可以下载或查看,没有帐号?立即注册 x 大家好, 我是炭窑居士, 好久不见 这次由我和好友fxyyoung一起给大家带来原创的毛发 ...
- ActionScript移动项目组件开发(2):可滚动的容器
内容简介 这篇文章是上一篇< ActionScript移动项目组件开发(1):可滚动容器 >的延续.在上一篇文章中,我们继承Sprite,封装了一个可滚动的容器,并且这个容器的交互方式是适 ...
- Android移动应用开发之TextView实现阴影跑马灯文字效果
文章目录 前言 创建项目 配置文件简介 阴影走马灯文字 values/string.xml values/colors.xml layout/activity_main.xml 法2 main/jav ...
- node.js require 自动执行脚本 并生成html,利用node.js实现自动生成前端项目组件的方法详解...
本文主要给大家介绍了关于利用node.js实现自动生成前端项目组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 脚本编写背景 写这个小脚本的初衷是,项目本身添加一个组件太 ...
- html纵向的跑马灯效果,HTML+CSS入门 如何实现跑马灯/走马灯效果
本篇教程介绍了HTML+CSS入门 如何实现跑马灯/走马灯效果,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实 ...
最新文章
- bootstrap-图标使用
- C++知识点11——this指针,const成员函数,访问权限控制
- web版扫雷小游戏(三)
- python超简单小游戏代码-Python实现简单的猜单词小游戏
- 第一章--最小的“操作系统”
- SVM 核函数相关知识
- R作图-----北京市2017年一季度AQI指数日历热图
- GitHub开源项目 - Jeecg-Boot开始开发平台介绍
- Kubernetes的系统架构与设计理念
- 戴尔PowerEdge-C服务器新成员:PowerEdge C5125和C5220
- oracle多表嵌套查询使用,oracle sql 多表 嵌套子查询 连接查询, join where exist i...
- Sql注入截取字符串常用函数
- 例4.5 最小公倍数 - 九度教程第48题(最小公倍数)
- STM32F103使用硬件i2c作为从机模式
- Minimax 算法中的 Alpha Beta 剪枝
- 注册免费域名教程(怎样免费注册域名)
- 锐捷网络 ipv6 默认路由配置
- 显示器/电脑屏幕字体出现重影
- 话费充值api接口 手机话费充值功能接入
- 实现安全登录的两种方法
热门文章
- google 浏览器默认打开控制台_chrome浏览器使用 Console(控制台)
- filestorage 修改吧部分数据_数据库系统概论课后答案||第五版
- python怎么读取石墨表格_Python用Pandas读写Excel
- leetcode42 --- trap
- 学python需要记笔记吗_开始学python,一些笔记
- c++没有终结符的多行输入如何停止_如何使用iloc和loc 对Pandas Dataframe进行索引和切片...
- 逆向so_安卓逆向 | 分析调试与so调用实战
- 计算机网络学习笔记(一)——分层模型、协议、服务、连接模式、标准化组织
- android 搜索工具栏,Android记事本在菜单栏添加搜索按钮方法
- mac怎么安装python开发环境搭建_Mac OS搭建Python开发环境