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

[andurils]

Vue Code View(VCV)

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

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

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

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

在线预览

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

codesandbox 示例: vue-code-view-example

✨ 特性

• 💻 代码可以在线编辑，实时预览效果。
• 🎨 支持示例代码高亮，配置主题。
• 🌈 支持 <style> 解析渲染。
• 📑 支持 Markdown 文件示例渲染。

📦 安装

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

官网截图

[saigo]

已经 star ，如果写组件库的文档，这个岂不是很方便

[andurils]

@saigo 嗯嗯，组件实现基于 SFC ，主要解决场景就是组件库的文档展示调试。
基于 vue 3 版本的也在开发中了

[lizhenda]

这想法真的很不错哦