前端代码在线编辑器:codepen、codesandbox
前端代码在线编辑器:codepen、codesandbox
最后发布:2020-05-03 21:53:47
首次发布:2020-05-03 21:53:47
推荐两个前端代码在线编辑器
单文件在线编辑器:https://codepen.io/pen/
项目级在线编辑器:https://codesandbox.io/
单文件在线编辑器
相信使用 element-ui组件库的小伙伴应该知道 codepen在线编辑器,因为element-ui默认的在线案例都是通过 codepen提供。以下是<el-table>
的一个在线案例。
分别提供了 html、css、js 编辑框,以及预览视图,简洁明了。顶部几个按钮分别可以进行保存、项目配置(引入依赖在此配置)、切换展示视图等等。
引入外部依赖库通过顶部的’Setting’进行操作。如图,有两种方式:
- 通过搜索来引入外部依赖
- 直接写url地址来引入外部依赖
项目级在线编辑器
当仅仅调试单个文件代码时 codepen 其实已经满足需要了。但当需要调试多个文件,存在父子组件、页面嵌套引用等等情况时,codepen就不行了(至少目前我是这样认为的)。
所以,噔噔噔,主角登场,就是 codesandbox。重点是,不需要登录也能用!!!
如图,左侧一块是项目结构、依赖、编辑窗口,像极了在本地用VSCode开发。右侧就是预览视图。
codesandbox提供了很多基础模板,用来创建项目,上图就是使用其vue模板创建的项目。(不登录只能创建三个项目)
操作也简单,只需要两步:
1、点击‘Create SandBox’
2、选择需要的模板
完成了项目的创建,等待其初始化完成就能进行开发测试了。
经常需要调试代码,so创建一个基础测试模板,新功能可fork此模板进行调试。
包含组件:vue-router、element-ui
vue-router模板
end