leon96

Vue Playground具有新增、删除文件，修改文件名的功能，接下来我们也实现一下 修改文件名称 在FileNameList组件添加一个编辑的状态，来判断展示输入框还是展示名称 在blur事件中同

编译 在原理篇中有介绍是通过@babel/standalone来编译 安装 首先看一下编译后的代码是怎么样的 将编译逻辑单独抽离出来 渲染只需要编译入口文件 在Preview组件引入Editor组件，

当点击FileNameList组件中文件名称时，Editor组件会显示对应文件内容，Preview组件会渲染对应内容 添加zustand 如何可以让多个组件共享一份数据？ 可以使用context、re

创建一个react+typescript项目 布局 首先从布局开始，可以看到Vue Playground可以拖动滚动条左右拖动控制大小 可以使用allotment 这个组件 安装 Vue Playgr

实现原理 怎么能实现一个类似Vue Playground呢 从布局来看，左边为代码输入区域，右边为预览区域，我们一个个来看 代码编写区域 借用了@monaco-editor/react，它把monac

项目地址 jsx在babel编译后的结果是React.createElement，由createElement生成虚拟DOM React.createElement有三个参数 type props c

主要思路： 前端使用文件的slice把大文件切割成多个小文件 后端收到小文件根据索引排序，然后合并小文件，返回文件的url 前端 HTML结构 在handleChange函数处理文件变化 更新当前文件

组件效果 在input组件基础上扩展下拉框数据展示，支持自定义筛选数据fetchSuggestions方法，自定义渲染样式renderOption方法、选中某一项数据回调onSelect 组件结构 s

组件效果 支持设置lg、sm 尺寸大小 支持设置前后缀的文字、图标 支持设置在右侧悬浮添加一个icon 组件结构 src/components/Input/input.tsx input-size-$