🔥码上掘金初次使用教程Vue+Element-plus前言码上掘金是掘金提供的代码在线playground平台，编写

前言

码上掘金是掘金提供的代码在线playground平台，编写成功后可点击发布，发布成功后可以将代码片段插入到掘金文章里，目前已支持如下语言模板：

本文对初次操作码上掘金使用Vue+Element-plus编码，发布，插入文章步骤做一个整理，方便初次使用者快速开始！！

正文

效果图

使用步骤

码上掘金官网地址code.juejin.cn/

新建代码片段，选择模板
设置，Markeup选项内填充Vue+Element-plus依赖

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <title>Element Plus demo</title>
  </head>

编写对应HTML、CSS、JavaScript，调试运行，保存，发布
发布审核通过后，文章里插入代码片段
设置文章内代码片段展示布局，纯净模式可只展示预览区，在文章内展示效果更好

总结

码上掘金可以把代码片段以预览效果插入文章内展示，丰富内容，甚至可以直接做一些基本教学的Demo例子，方便快捷。

点赞+收藏，关注不迷路！
码上掘金 code.juejin.cn/
码上掘金指南