不用跑项目,组件效果所见即所得,绝了!
共 1877字,需浏览 4分钟
·
2022-04-18 16:52
我们在写需求时都会封装一些组件,然后会为该组件定义一些 props
,使其跟业务分离,变得更通用。写完组件后需要验证一下组件的效果,也就需要简单 mock
一下数据传进去,然后跑一下项目看一下
// components/card/index.tsx Card 组件
// 咱先来写个组件
export default function Card (props) {
const { name } = props
return (
{name}</div>
)
}
// index.tsx 项目根目录
// 组件写好了,找个地方引入一下,传点数据进去,免得项目崩了
import Card form 'card'
export default function App () {
return (
"零一" />
)
}
$ # 跑一下项目,看看刚才写的组件的效果
$ yarn dev
这套流程,你是不是很熟悉?大家可能都是这么干的,看完效果后还要回过头去把刚刚不要的测试代码都删掉
然而,我找到了一个非常好用的 Vscode 插件 大大简化了这个流程!!!!
它就是 Preview.js ,一个用于项目中组件实时预览的插件
它有什么优点?
支持 React(v16+)
、Vue2
、Vue3
、SolidJS
,并即将支持 Preact
和 Svelte
无需启动项目,直接静态预览组件效果 自动识别组件 自动生成 props 的 mock 数据 实时刷新,无需疯狂点保存触发 可以针对同一个组件生成多个预览,并可快速切换 支持调整页面比例,以及切换不同分辨率的设备 暗黑模式切换 直接搜索项目中的其它组件,快速切换
香不香?我反正已经上手使用过了,是真的香!之前我自己也做过组件库的项目,写完一个组件,就需要写一个 example
去看看效果,要是用了这个插件,项目也不用跑,实时预览,该有多爽啊(正在开发组件库的同学看过来,福利啊)
再讲一下这个插件的缺点
插件是刚出的,可能会有一些bug,这是难免的 上述优点中,6、7、8都是需要付费的,不过目前可以白嫖,等会讲 待发现...
但我目前用下来是没啥问题的
接下来带大家体验一下
安装
直接在 VsCode 的插件市场搜索:Preview.js
,安装即可
![](https://filescdn.proginn.com/e5455c75b129a3702e06f7e7e2732af0/820c3cf3db7ccac6f85b1a2286f0a1ba.webp)
安装插件 然后最好重启一下 VsCode
emmmm,大多数同学应该会收到这样一条报错信息:
![](https://filescdn.proginn.com/488fa63b543c37f492b095743b96b629/0f153d097f71c8d303701ae210eff1ce.webp)
npm 版本过低 因为重启后的初始化阶段,Preview.js
插件会安装一些依赖包,并且它们最低支持的 npm
版本是 7+
,估摸着大部分同学的 npm
包都是小于 7 的,所以还是建议大家想要使用时切换一下 node
版本,比如用 nvm use 17.5.0
,此时的 npm
版本就到了 8+
了,满足了需求,此时还需要重启一次
稍微耐心等待几秒钟,等它的依赖包都装好就ok了
![](https://filescdn.proginn.com/7cb30a332be0e19cf9848cb4615fe5ef/9b7543d071e4781150998fb43de84532.webp)
preview.js 依赖包安装成功 基本使用
为了方便起见,我就拿 React
的代码来做示例了,但刚才提到那些库也都是支持的哈,大家可以自行尝试
咱们随便找到项目中的一个组件打开
![](https://filescdn.proginn.com/d044c72cf47d8e7729d47114f4f73bbe/c11740b2dc65aba8cc72e234faea0fa0.webp)
可以看到,插件自动识别到了我的 Card
组件,并在上方悬浮了一个 Open Card in Preview.js
的灰色按钮,点击以后右边就会出来一个预览窗口了(此时咱们都还没启动项目)
![](https://filescdn.proginn.com/33b639516a079f1e9fa9686f109f4297/c4261c568a279fcfdb7403fbaab171c2.webp)
还能看到,右下角也帮我们生成了该组件需要的 props
的 mock 数据,不过这个前提条件是你项目是 TS 的,并且给 props 限定了类型才行,否则是不行的(我试过了)
一切(新增组件、修改文本、修改样式...)的修改都是实时的(除了修改 props 类型),我们来看一下
![](https://filescdn.proginn.com/50637349b1af87ac7a4136331acf6b68/222440e2c9d8abfaa3dc2d41a265ed98.webp)
类型修改不能实时也算是一个小缺点,希望后续可以改进一下。如果咱们改了类型,目前只需重启预览窗口就可以了,点底部的刷新是没用的
Pro 级别的功能
接下来是高级用户可以使用的功能,我看到他们官网是有申请 30 天免费体验资格的,为了本文的效果,我先申请了
申请网址:https://previewjs.com/checkout
填一下自己的邮箱,就申请成功了
![](https://filescdn.proginn.com/70bd9a14f49e75e3e8f4483cd026c16d/e275fea71d5ddfde22f2b742aecd6b0f.webp)
然后它会把一个兑换码发到你的邮箱里
![](https://filescdn.proginn.com/852ae2e795fef4036a268ec63e504b71/4a4304a6958ebb0737201fcae8439fb4.webp)
拿着这个码去 VsCode 的 Preview.js 预览窗口里填写即可
![](https://filescdn.proginn.com/540c21da5bb845bb54f98d66320a836d/a8c5008245a9ce038aec562630a65dee.webp)
![](https://filescdn.proginn.com/716b75e2e1f379124ea42a0cc57d3205/d27bb386d1002ce5f9ef77f6f6c5e505.webp)
然后就成功了,页面现在多了一堆功能
![](https://filescdn.proginn.com/ab4a9224be45cb413a67a87c89f34820/c1cd04a552db812acf0d5959d93f6394.webp)
来统一体验一下吧
![](https://filescdn.proginn.com/f4ea0404ba2ebbfbdff3911a185ef9c8/f3bcfec4a9cd3a36a07866d9fad97ed9.webp)
体验pro付费功能 总结
总体来说这个插件已经很 nice 了,即使不用付费版本的功能,也可以满足基本的需求,而且这个功能在写业务时非常有用,大大提高工作效率,真的真的强烈推荐!!!!
Preview.js: https://previewjs.com/