前端不用跑项目vscode组件效果所见即所得

目录
  • 组件封装及需求效果
    • Preview.js优点
    • Preview.js插件的缺点
  • 安装
  • 基本使用
  • Pro 级别的功能
  • 总结

组件封装及需求效果

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

// 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 ，一个用于项目中组件实时预览的插件

Preview.js优点

  • 支持 React（v16+）、Vue2、Vue3、SolidJS，并即将支持 Preact 和 Svelte
  • 无需启动项目，直接静态预览组件效果
  • 自动识别组件
  • 自动生成 props 的 mock 数据
  • 实时刷新，无需疯狂点保存触发
  • 可以针对同一个组件生成多个预览，并可快速切换
  • 支持调整页面比例，以及切换不同分辨率的设备
  • 暗黑模式切换
  • 直接搜索项目中的其它组件，快速切换

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

Preview.js插件的缺点

  • 插件是刚出的，可能会有一些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/

我是零一，分享技术，不止前端，我们下期见~

以上就是前端不用跑项目的vscode组件所见即所得效果的详细内容，更多关于前端项目vscode组件效果的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • VSCode如何远程连接Linux教程(密钥的使用)

    VSCode如何远程连接Linux教程(密钥的使用)

    目录 1.VSCode远程连接步骤 2.密钥的使用 1.配置密钥 2.密钥基本使用 3.配置密钥config VSCode在远程连接Linux时,怎么连接,是否需要密钥,以下进行记录讲解. 1.VSCode远程连接步骤 1.安装插件 打开VSCode后,使用快捷键 Ctrl+Shift+X 或者使用如下图标,在里面搜索 ssh,进行安装 2.配置远程服务器 安装后,会出现左下角那个按钮,点击会出现右边的选项,在 设置中进行远程服务器的配置.  3.配置 config 的文件 选择第一行,出现如下

  • VsCode安装和配置c/c++环境小白教程(图文)

    VsCode安装和配置c/c++环境小白教程(图文)

    目录 1. vsCode下载和安装 1. 下载Microsoft vsCode 2. 安装vsCode 3. 下载中文插件 2. MinGW编译器下载和配置 1. 下载MinGW 2. 下载后放到自己方便的目录,并复制文件里bin目录的路径(后面用得到) 3. 在系统环境变量配置path变量 4. 检查是否配置成功 3. vsCode配置c/c++ 1. 下载c/c++插件 2. 配置 3. 测试是否成功 4. 常见问题 5.最后 1. vsCode下载和安装 1. 下载Microsoft vs

  • VSCode开发TypeScript的实现步骤

    VSCode开发TypeScript的实现步骤

    目录 第一个程序 配置文件tsconfig.json 调试 模块化 使用Webpack打包客户端代码 TypeScript是JaveScript的超集,为JavaScript增加了很多特性,它可以编译成纯JavaScript在浏览器上运行.TypeScript已经成为各种流行框架和前端应用开发的首选.本文概要介绍使用VS Code开发TypeScript的过程. 第一个程序 在VS Code中开发TypeScript,首先要安装TypeScript,这里使用npm安装: npm install

  • Vscode配置C/C++环境使用minGW(保姆级配置过程)

    Vscode配置C/C++环境使用minGW(保姆级配置过程)

    目录 本人配置过程 检查minGW是否安装成功 创建你的第一个helloworld 构建helloworld.cpp 运行构建 调试helloworld.cpp 本人配置过程 准备工作: 系统:win11/win10 安装vscode 或者 本地下载地址 下载vscode中的c/c++插件 获取最新版的mingw 或 本地下载地址,根据系统选择合适的版本(这里以win11(与win10无差别)为例). 等待下载. 下载完成后进入安装界面,由于本人电脑为64位(i686为32位),配置如下即可.

  • vscode 采用C++17版本进行编译的实现

    vscode 采用C++17版本进行编译的实现

    目录 Code Runner 不用Code Runner 有一天我在打题的时候,使用了这种方式来初始化一个vector vector<int> nums = {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->-4,-1,0,3,10}; 编译器马上很快就执行了编译命令 if ($?) { g++ day2_1.cpp -o day2_1 } ; if ($?) { .\day2_1 } 并且也很快的报了错(寄了) day2_1.cpp: In function 'i

  • 前端不用跑项目vscode组件效果所见即所得

    目录 组件封装及需求效果 Preview.js优点 Preview.js插件的缺点 安装 基本使用 Pro 级别的功能 总结 组件封装及需求效果 我们在写需求时都会封装一些组件,然后会为该组件定义一些 props ,使其跟业务分离,变得更通用.写完组件后需要验证一下组件的效果,也就需要简单 mock 一下数据传进去,然后跑一下项目看一下 // card/index.tsx Card 组件 // 咱先来写个组件 export default function Card (props) { cons

  • vue前端重构computed及watch组件通信等实用技巧整理

    vue前端重构computed及watch组件通信等实用技巧整理

    目录 基于 springboot+vue 的测试平台开发 一.常规知识点 1.mounted 与 created 2. 计算属性 computed 3. 监视属性 watch 二.组件通信相关 1. 父组件给子组件传递 2. 子组件给父组件传值 3. 任意组件之间传值 4. vuex 基于 springboot+vue 的测试平台开发 继续更新 当前项目进度的前端重构已经完成了,在重构之余也对一些交互做了优化等.在本次的重构过程中感觉还是有不少收获,尤其是对于一些vue的前端知识的应用. 今天不

  • 基于Vue2实现简易的省市区县三级联动组件效果

    这是一个基于Vue2的简易省市区县三级联动组件,可以控制只显示省级或只显示省市两级,可设置默认值等.提供原始省市县代码和名称数据,适用于各种有关城市区县的应用. 安装 我们使用npm安装: npm install v-distpicker --save 使用 首先在模板中加入组件: <v-distpicker></v-distpicker> 如果要带默认值,则可以这样: <v-distpicker province="广东省" city="广州市

  • Vue项目vscode 安装eslint插件的方法(代码自动修复)

    ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 方法和步骤: 通常情况下vue项目都会添加eslint组件,我们可以查看webpack的配置文件package.json查看,也可以查看工程下是否有.eslintrc.js和.eslintignore查看到eslint是否开启. 当我们编写不符合eslint规范的代码时,启动项目会报错,比如 这个时候可以安装vscode eslint插件,就可以自动检测不符合规范的代码.打开vscode左侧扩展面板,搜索es

  • Vue跑马灯marquee组件使用方法详解

    Vue跑马灯marquee组件使用方法详解

    本文实例为大家分享了Vue跑马灯marquee组件的具体代码,供大家参考,具体内容如下 一.实现效果 二.实现过程 前言:最开始用间隔器方案制作了一个跑马灯,但是放在移动端中会出现严重的掉帧卡顿现象,于是整理思路后采用transition方案制作一个从右到左的动画处理问题 思路整理: 1. 过渡是需要设定时间的,但是跑马灯中的文本可能是长短不一的 解决方案:根据文本的总宽度(即文本总长)设定过渡时间,假设文本宽度500px,我们将其除以50,即过渡时间为10s 原生js表示如下: const t

  • log4j2 项目日志组件的实例代码

    在项目运行过程中,常常需要进行功能调试以及用户行为的跟踪和记录,部分人习惯使用System.out,但这并不建议,它仅仅是使用方便但不便于维护也无扩展性.相比log4j的话,log4j可以控制日志信息的输送目的地.输出格式以及级别等等,使我们能够更加细致地控制日志的生成过程. Log4j2是对Log4j1的升级,在性能和功能上有显著的改进,包括多线程中吞吐量的增强.占位符的支持.配置文件自动重新加载等 一.入门介绍 1.下载jar包 pox.xml <dependencies> <dep

  • vue.js项目 el-input 组件 监听回车键实现搜索功能示例

    基于element-ui 组件 开发的vue.js项目, 实现回车键发起搜索,和原生的input 标签使用方法不一样: el-input 监听键盘按下状态 得用@keyup.enter.native,如果是非el-input 组件,可以直接用@keyup.enter <el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIc

  • webpack4打包vue前端多页面项目

    之前一直用的脚手架,这次自己搭建webpack前端项目,花费了不少心思,于是做个总结. 1.用法 项目结构如下: project |- bulid <!-- 这个目录是自动生成的--> |- public |- css |- js |- page1.html <!-- 插件生成的html文件--> |- page2.html <!-- 插件生成的html文件--> ... |- public/ <!-- 存放字体.图片.网页模板等静态资源--> |- src

  • vue实现文字横向无缝走马灯组件效果的实例代码

    marquee标签已经废弃了,只能手动实现文字走马灯样式 基于vue组件开发 <template> <div class="wrap"> // 外框,固定宽度 <div id="box"> // 内部滚动框 <div id="marquee">{{text}}</div> //展示的文字 <div id="copy"></div> // 文字副

  • vue项目ElementUI组件中el-upload组件与图片裁剪功能组件结合使用详解

    vue项目ElementUI组件中el-upload组件与图片裁剪功能组件结合使用详解

    vue项目ElementUI组件中el-upload组件与裁剪功能组件结合使用,供大家参考,具体内容如下 如下图所示,点击上传组件,选择文件后,会立马弹出图片裁剪功能组件的页面 问题描述: 1.在使用upload组件中,如果修改fileList中的内容,浏览器会报错2.获取上传的文件,传递给图片裁剪组件(在on-change中获取文件并传递个裁剪组件)3.要获取裁剪后的图片即File文件(将裁剪后的图片返回出去)4.获取到裁剪后的file调用上传的接口 由于el-upload组件默认使用的是“选

随机推荐