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

心已赠人 2023-10-06 07:26 114阅读 0赞

#### 文章目录 ####

*  单文件在线编辑器
 *  项目级在线编辑器

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

## 单文件在线编辑器 ##

[codepen][https_codepen.io_pen]

相信使用 element-ui组件库的小伙伴应该知道 codepen在线编辑器，因为element-ui默认的在线案例都是通过 codepen提供。以下是`<el-table>`的一个在线案例。  
分别提供了 html、css、js 编辑框，以及预览视图，简洁明了。顶部几个按钮分别可以进行保存、项目配置（引入依赖在此配置）、切换展示视图等等。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNzcyNDQx_size_16_color_FFFFFF_t_70]  
引入外部依赖库通过顶部的’Setting’进行操作。如图，有两种方式：

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNzcyNDQx_size_16_color_FFFFFF_t_70 1]

## 项目级在线编辑器 ##

[codesandbox][https_codesandbox.io]

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

所以，噔噔噔，主角登场，就是 codesandbox。重点是，不需要登录也能用！！！  
如图，左侧一块是项目结构、依赖、编辑窗口，像极了在本地用VSCode开发。右侧就是预览视图。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNzcyNDQx_size_16_color_FFFFFF_t_70 2]  
codesandbox提供了很多基础模板，用来创建项目，上图就是使用其vue模板创建的项目。（不登录只能创建三个项目）  
操作也简单，只需要两步：  
1、点击‘Create SandBox’  
2、选择需要的模板  
完成了项目的创建，等待其初始化完成就能进行开发测试了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNzcyNDQx_size_16_color_FFFFFF_t_70 3]

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

--------------------

end

[https_codepen.io_pen]: https://codepen.io/pen/
[https_codesandbox.io]: https://codesandbox.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNzcyNDQx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020050318544876.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNzcyNDQx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNzcyNDQx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200503191227795.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNzcyNDQx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNzcyNDQx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200503220023512.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNzcyNDQx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNzcyNDQx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200503220920882.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNzcyNDQx,size_16,color_FFFFFF,t_70
[vue-router]: https://codesandbox.io/s/vue-router-template-fx9wh?file=/src/main.js