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

官网截图