前端代码在线编辑器：codepen、codesandbox

推荐两个前端代码在线编辑器
单文件在线编辑器：https://codepen.io/pen/
项目级在线编辑器：https://codesandbox.io/

单文件在线编辑器

codepen

相信使用 element-ui组件库的小伙伴应该知道 codepen在线编辑器，因为element-ui默认的在线案例都是通过 codepen提供。以下是<el-table>的一个在线案例。
分别提供了 html、css、js 编辑框，以及预览视图，简洁明了。顶部几个按钮分别可以进行保存、项目配置（引入依赖在此配置）、切换展示视图等等。

引入外部依赖库通过顶部的’Setting’进行操作。如图，有两种方式：

1. 通过搜索来引入外部依赖
2. 直接写url地址来引入外部依赖

项目级在线编辑器

codesandbox

当仅仅调试单个文件代码时 codepen 其实已经满足需要了。但当需要调试多个文件，存在父子组件、页面嵌套引用等等情况时，codepen就不行了（至少目前我是这样认为的）。

所以，噔噔噔，主角登场，就是 codesandbox。重点是，不需要登录也能用！！！
如图，左侧一块是项目结构、依赖、编辑窗口，像极了在本地用VSCode开发。右侧就是预览视图。

codesandbox提供了很多基础模板，用来创建项目，上图就是使用其vue模板创建的项目。（不登录只能创建三个项目）
操作也简单，只需要两步：
1、点击‘Create SandBox’
2、选择需要的模板
完成了项目的创建，等待其初始化完成就能进行开发测试了。

经常需要调试代码，so创建一个基础测试模板，新功能可fork此模板进行调试。
包含组件：vue-router、element-ui
vue-router模板

end