Hello~ 各位大家好啊，我们今天继续书说上回。
回到家，吃点零食，咱们就开始聊天。
发文字吧就是做不到像直播那样可以和大家实时的互动，聊聊天啥的。而且掘金发文还要审核，这时效性就更差了 ......
就选GrapesJS了
昨天我们通过AI找到了一些还不错的开源低代码框架，也不纠结了。选这颗葡萄 来试试吧。朋友们如果有更好的经验，希望你们能和我分享分享。
我们先把源码下下来
git clone https://github.com/GrapesJS/grapesjs.git
有些朋友网络可能不是那么好，有需要可以联系我，尽管提哈，不用客气。
到GrapesJS的GitHub上看了看，目前还有13个Issues，有些是bug，有些是feature，大家有能力的话可以上去帮帮忙。
我今天的网速也不行，我再废话几句。GitHub上有个很常规的操作，在源码首页，点击键盘上的句号键就可以开启一个在线的VScode 编辑器。而且GitHub还提供了Codespaces, 可供你在线运行呐。
大家可在这个远程这里打开你的Codespaces，当然在线打开的空间也是有限制的，不可以同时打开多个。
和Grapes的初始
代码下下来了，别的啥也不管，先跑起来吧！先揭开Grapes的面纱，认识认识。
// 就跟原作者一样使用yarn吧，安装依赖
yarn
// 运行
yarn start
首次加载，感觉渲染有点慢
运行起来就是下面这样，我花了点时间去尝试了一下。界面功能啥的感觉都挺好的。
- 支持在线引图片
- 能够预览
- 可针对设备，具有响应式
- 全屏之后更像个编辑器了
一块熟悉一下编辑器
从左往右依次是：
- 调节目标设备的
- 小正方形是显示组件边框的（很细的虚线，要仔细看，辅助功能，不开也没啥）
- 预览按钮
- 放大按钮（挺好的，放大操作更显专业，化身艺术家）
- </> 可以显示HTML 和 CSS代码，不可以编辑
- 笔刷图标，调节组件属性参数的，左边栏就是可以操作的属性（可以给组件添加类样式Classes，提供了四种属性选择器 [普通的类选择器 和 三个伪类选择器Hover、click、奇偶]，下面 Selected 显性告诉我们当前元素选中的状态）
- 设置按钮只提供了两个功能：设置id 和 设置title，可以在显示Code的按钮下看你设置的 id 和 title
- 层级，显示页面上所有的组件层级（有个bug，小眼睛可见与不可见似乎没起作用）
- 组件库，demo里面只提供了一个Block组件
不过尝试了一番，我觉得有几点可以优化一下（后面我们在这个基础上给它调整一下，这个看情况）：
- 主视窗口和右边的编辑窗口要是可以拖动就好了，有时候编辑东西，固定了总感觉太窄
- 主视窗口右键菜单没有
- 加一个新用户指引
- 修复层级中的小bug，实现隐藏与锁定功能
- 预制体功能，可以把场景（主视窗）内的组件按用户所编排的拖到预制体内，提高复用
调式 不是调戏
项目运行起来了，大家可以根据debug去看看Grapes的一些核心逻辑。
大家只需要在项目 src/index.ts 找到init函数，然后打个断点即可。
LAST BUT NOT LEAST
好啦，码到现在也已经深夜了0点15分了。今天也没和大家扯点别的，直接就进入主题初始一下GrapesJS这个框架，虽然内容不多，不过前前后后也花了两个多小时，主要我跟大家的进度是一样的，也是第一次使用这个框架，还是需要花时间去了解一下这个框架。
我的主题还是不变哈，不是来学这个框架的，是要整个什么拖拽的现成的项目修修补补，完成“干翻前端”的宏愿。如果说到最后能通过这一系列的学习，最后能整个什么小项目那就算成功了。
除此之外，我的目的还是希望能和大家共同交流，没准大家志同道合——这B班是再也不想上了，我要自由。
好啦，安啦安啦，又快12点半了。
咱们明天见~
