在线代码编辑器(vue 在线代码编辑器)

你好,欢迎来到 码上掘金

码上掘金是由稀土掘金推出的一款面向开发者的在线code playground服务,旨在为每一位热爱技术的人提供一个快速分享、交流编码知识的平台。用户无需搭建部署环境,只需编写核心代码即可快速在线获得运行效果预览。

这里提供了一份新手指南!帮助你了解并快速上手使用码上掘金。

1. 主页面

访问码上掘金码上掘金 即可打开码上掘金主页面

在线代码编辑器(vue 在线代码编辑器)

在这里可以实现项目创建、项目管理

1.1 创建

点击页面左上角“新建代码片段”即可创建新的项目,默认会创建一个由Markup、Style、Script几个版块组成的空项目,同时还可以选择基于模板新建,当前提供了vue、react模板,以及用户自己保存的模板。

2. 编码页面

新建项目后,将会打开新标签页,在新的页面中即可进行代码编写,如图

在线代码编辑器(vue 在线代码编辑器)

2.1 定义项目名称

新建项目时,系统会创建一个8位的随机名称,你可根据自己的需求点击标题旁的图标对标题进行修改,如图:

在线代码编辑器(vue 在线代码编辑器)

2.2 编写代码

当前可基于自己的需求,分别在Markup、Style、Script三个版块进行代码编写,其中Style版块支持切换CSS/Less/Stylus/SCSS/SASS,Script版块支持切换JavaScript/TypeScript/React(JS)/React(TS)/Vue2/Vue3及自定义语言

在线代码编辑器(vue 在线代码编辑器)

2.2.1 布局设置

点击截图中的图标,可切换当前页面布局模式

在线代码编辑器(vue 在线代码编辑器)

2.2.2 Console

页面下方为console面板,用于编码过程中的调试

在线代码编辑器(vue 在线代码编辑器)

2.3 设置

2.3.1 Markup设置

可在该版块设置中完成标签内的元信息以及对于标签设置class

在线代码编辑器(vue 在线代码编辑器)

2.3.2 Style设置

在该版块中可以设置项目的基础样式,同时支持添加多个CSS依赖资源

在线代码编辑器(vue 在线代码编辑器)

2.3.3 Script设置

该版块中可以添加多个JS依赖资源

在线代码编辑器(vue 在线代码编辑器)

2.3.4 基础设置

用于设置项目的名称及描述信息

在线代码编辑器(vue 在线代码编辑器)

2.3.5 存储设置

用户设置项目在保存相关的事件,当前可设置是否自动保存、是否自动运行以及是否自动格式化代码

在线代码编辑器(vue 在线代码编辑器)

2.3.6 编辑器设置

用于设置编辑器常规的缩进信息

在线代码编辑器(vue 在线代码编辑器)

2.3.7 访客设置

因码上掘金项目在发布并通过审核后,可以插入至掘金文章或分享给他人浏览,所以可在此对客态呈现效果进行设置

在线代码编辑器(vue 在线代码编辑器)

下图为插入到掘金文章中的效果

在线代码编辑器(vue 在线代码编辑器)

2.4 更多信息

页面左下角为关于该项目的更多信息介绍,点击可展开查看

在线代码编辑器(vue 在线代码编辑器)

2.5 Fork

当浏览到比较感兴趣的项目时,可以将其fork至自己的账号下,操作页面顶部“Fork”按钮即可

在线代码编辑器(vue 在线代码编辑器)

2.6 发布

当编码完成后,可点击页面右上角“发布”按钮进行发布,发布并通过审核后,可将该项目插入至掘金文章或分享给其他人浏览查看

3. 写在最后

以上便是码上掘金相关的功能介绍,目前该产品还是持续进行迭代优化中,欢迎大家积极体验并反馈。

作者:掘金产品经理链接:https://juejin.cn/post/7152392404757118990来源:稀土掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至QQ邮箱:3628405936@qq.com 举报,本站将立刻删除。
(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注