不用跑项目,组件效果所见即所得,绝了!

简介: 大家好,我是零一,看到一个好东西,忍不住来分享一下。

我们在写需求时都会封装一些组件,然后会为该组件定义一些 props ,使其跟业务分离,变得更通用。写完组件后需要验证一下组件的效果,也就需要简单 mock 一下数据传进去,然后跑一下项目看一下


// components/card/index.tsx  Card 组件 
// 咱先来写个组件
export default function Card (props) {
  const { name } = props
  return (
    <div>{name}</div>
  )
}


// index.tsx  项目根目录
// 组件写好了,找个地方引入一下,传点数据进去,免得项目崩了
import Card form 'card'
export default function App () {
  return (
    <Card name="零一" />
  )
}


$ # 跑一下项目,看看刚才写的组件的效果
$ yarn dev


这套流程,你是不是很熟悉?大家可能都是这么干的,看完效果后还要回过头去把刚刚不要的测试代码都删掉


然而,我找到了一个非常好用的 Vscode 插件 大大简化了这个流程!!!!


它就是 Preview.js ,一个用于项目中组件实时预览的插件


它有什么优点


  1. 支持 React(v16+)Vue2Vue3SolidJS,并即将支持 PreactSvelte


  1. 无需启动项目,直接静态预览组件效果


  1. 自动识别组件


  1. 自动生成 props 的 mock 数据


  1. 实时刷新,无需疯狂点保存触发


  1. 可以针对同一个组件生成多个预览,并可快速切换


  1. 支持调整页面比例,以及切换不同分辨率的设备


  1. 暗黑模式切换


  1. 直接搜索项目中的其它组件,快速切换


香不香?我反正已经上手使用过了,是真的香!之前我自己也做过组件库的项目,写完一个组件,就需要写一个 example 去看看效果,要是用了这个插件,项目也不用跑,实时预览,该有多爽啊(正在开发组件库的同学看过来,福利啊)


再讲一下这个插件的缺点


  1. 插件是刚出的,可能会有一些bug,这是难免的


  1. 上述优点中,6、7、8都是需要付费的,不过目前可以白嫖,等会讲


  1. 待发现...


但我目前用下来是没啥问题的


接下来带大家体验一下


安装


直接在 VsCode 的插件市场搜索:Preview.js,安装即可


fdc1d3bbf81eba18f09811481c41d04d.png


然后最好重启一下 VsCode


emmmm,大多数同学应该会收到这样一条报错信息:


59248c7c46b814a5b051209ec77f4c96.png


因为重启后的初始化阶段,Preview.js 插件会安装一些依赖包,并且它们最低支持的 npm 版本是 7+,估摸着大部分同学的 npm 包都是小于 7 的,所以还是建议大家想要使用时切换一下 node 版本,比如用 nvm use 17.5.0,此时的 npm 版本就到了 8+ 了,满足了需求,此时还需要重启一次


稍微耐心等待几秒钟,等它的依赖包都装好就ok了


69e5ecc3f77a9d327c9ff6edfd96f174.png


基本使用


为了方便起见,我就拿 React 的代码来做示例了,但刚才提到那些库也都是支持的哈,大家可以自行尝试


咱们随便找到项目中的一个组件打开


f9a85ac0c02d4b9e2ebef5bfcde4dc11.png


可以看到,插件自动识别到了我的 Card 组件,并在上方悬浮了一个 Open Card in Preview.js 的灰色按钮,点击以后右边就会出来一个预览窗口了(此时咱们都还没启动项目)


be3a1e27c5e2e8dd44b23a096445aeac.jpg


还能看到,右下角也帮我们生成了该组件需要的 props 的 mock 数据,不过这个前提条件是你项目是 TS 的,并且给 props 限定了类型才行,否则是不行的(我试过了)


一切(新增组件、修改文本、修改样式...)的修改都是实时的(除了修改 props 类型),我们来看一下


74f3f19cbc4b68da2aa057ac0166ded5.jpg


类型修改不能实时也算是一个小缺点,希望后续可以改进一下。如果咱们改了类型,目前只需重启预览窗口就可以了,点底部的刷新是没用的


Pro 级别的功能


接下来是高级用户可以使用的功能,我看到他们官网是有申请 30 天免费体验资格的,为了本文的效果,我先申请了


申请网址:https://previewjs.com/checkout


填一下自己的邮箱,就申请成功了


72b2d4b36a785b755f4f3ff48077659f.png


然后它会把一个兑换码发到你的邮箱里


df2579861a686a53d8482720c2d21120.png


拿着这个码去 VsCode 的 Preview.js 预览窗口里填写即可


d5cd83761cec5cda3108374d1110d6b7.png


de19a2e0611862f43caafbb38797f7eb.png


然后就成功了,页面现在多了一堆功能


6f77b5c4c75f435e7736976700333c1a.png


来统一体验一下吧


6a6fb0fbef708191f25b1503f8910641.jpg


总结


总体来说这个插件已经很 nice 了,即使不用付费版本的功能,也可以满足基本的需求,而且这个功能在写业务时非常有用,大大提高工作效率,真的真的强烈推荐!!!!

相关文章
|
8月前
|
定位技术 图形学 开发者
【Unity实战】切换场景加载进度和如何在后台异步加载具有庞大世界的游戏场景,实现无缝衔接(附项目源码)
【Unity实战】切换场景加载进度和如何在后台异步加载具有庞大世界的游戏场景,实现无缝衔接(附项目源码)
661 0
|
7月前
|
小程序
跨端技术问题之页面或组件样式在小程序、小程序插件和小程序分包中有什么差异
跨端技术问题之页面或组件样式在小程序、小程序插件和小程序分包中有什么差异
|
1天前
|
移动开发 数据可视化 前端开发
tmagic - editor:大厂开源项目,零代码/低代码页面可视化编辑的利器,多端统一方案揭秘!如何用一套代码支持H5/PC,牛牛牛~~~
腾讯推出的开源项目 **tmagic-editor** 是一款所见即所得的页面可视化编辑器,支持H5、PC、TV等多种页面类型。它已应用于腾讯视频会员、腾讯会议等业务,每月生产和发布数百个页面,极大提高了开发效率。通过简单的拖拽和配置,非技术人员也能轻松创建复杂页面。tmagic-editor 支持 Vue2/Vue3 和 React 等多种前端框架,并提供了丰富的扩展功能,满足不同业务需求。
|
前端开发 C# 开发工具
Unity快手上手【熟悉unity编辑器,C#脚本控制组件一些属性之类的】
Unity快手上手【熟悉unity编辑器,C#脚本控制组件一些属性之类的】
179 0
|
数据采集 移动开发 JSON
基于NodeJS从零构建线上自动化打包工作流(H5-Dooring特别版)
NodeJS在前端领域正扮演着越越重要的地位,它不仅可以让前端工作者使用javascript编写后端代码,还能方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动,**非阻塞I/O **模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。
392 0
|
9月前
|
移动开发 小程序 Android开发
基于jeecgboot的flowable为uniapp适配的流程页面调整
基于jeecgboot的flowable为uniapp适配的流程页面调整
198 0
|
9月前
|
前端开发 JavaScript API
极简运行Vue打包文件:让你的网页快速启动,高效展现!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
能自己“跑”的表单控件,思路,雏形,源码。vs2005版本
下载地址: http://www.cnblogs.com/jyk/archive/2008/07/29/1255891.html 大家是怎么处理CRUD的呢?这里说一下添加、修改数据。    一大堆的表,n多的字段,经常变化的表现形式(比如文本框换成下拉列表框等),是不是很头痛?反正我是很烦的,因为我太懒了,对于这种不是太重要的,但是有很繁琐的东东,我总是要向出来一种“简单”的方式来处理。
723 0

热门文章

最新文章