Vue Code View(VCV 0.4.0):一个在线编辑、实时预览的代码交互组件

2022-01-24 10:37:49 +08:00
andurils  andurils

Vue Code View(VCV)

Build Status GitHub license

一个基于 vue 2.x的轻量代码交互组件,在网页中可以编辑、运行并实时预览代码效果展示。

当阅读包含大量代码的文档时,很多项目文档通过 markdown loader 实现了示例代码的 render 展示,但它是静态的。当我们想调试代码时,一般需要打开本地 IDE 或者打开 codepencodesandbox等在线编辑器网站,也会受制于电脑是否安装开发环境或者网络连接是否顺畅。

那么能不能有这么一个组件能支持在页面中编辑代码,在网页中可以编辑、运行并实时预览代码效果展示?

特别感谢组件 react-code-view,基于此编写了 vue 版本的组件!使用此组件在 vue 页面还是 markdown 文档中的多示例代码,都可以实时编辑运行代码、预览效果。

在线预览

在线预览: https://andurils.github.io/vue-code-view/#/demo

codesandbox 示例: vue-code-view-example

✨ 特性

📦 安装

npm i vue-code-view
# or
yarn add vue-code-view

🔨 配置

使用vue cli需要在vue.config.js文件进行配置,支持使用包含运行时编译器的 Vue 构建版本。

module.exports = {
  runtimeCompiler: true,
  // or
  chainWebpack: (config) => { 
    config.resolve.alias
      .set("vue$", "vue/dist/vue.esm.js");
  },
}; 

💻 示例

入口文件 main.js 中引入组件,不需要手动引入样式。

import Vue from "vue";
import App from "./App.vue";
import CodeView from "vue-code-view";

Vue.use(CodeView);

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

API

Attributes

参数 说明 类型 默认值 版本
theme 代码编辑器 theme mode,支持 light / dark light | dark dark
showCode 是否显示代码编辑器 boolean false
source 运行示例源码 string -
errorHandler 错误处理函数 function -
debounceDelay 错误处理防抖延迟(ms) number 300
layout render 视图布局 top | right | left top 0.4.0

官网截图

2328 次点击
所在节点    JavaScript
3 条回复
saigo
2022-01-24 11:14:35 +08:00
已经 star ,如果写组件库的文档,这个岂不是很方便
andurils
2022-01-24 11:18:45 +08:00
@saigo 嗯嗯,组件实现基于 SFC ,主要解决场景就是组件库的文档展示调试。
基于 vue 3 版本的也在开发中了
lizhenda
2022-01-24 14:17:06 +08:00
这想法真的很不错哦

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/830208

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX