前言
vue-code-view是一个基于 vue 2.x、轻量级的代码交互组件，在网页中实时编辑运行代码、预览效果的代码交互组件。
官方手册：
Vue Code View
参考文章：
[个人开源]vue-code-view:一个在线编辑、实时预览的代码交互组件
Vue Code View: A Vue 2 SFC REPL component
使用此组件, 不论 vue 页面还是 Markdown 文档中的示例代码，效果如下： 
实现
安装依赖
npm i vue-code-view # or yarn add vue-code-view
vue.config.js配置
注意：这里用的是or（或）
module.exports = { runtimeCompiler: true, // or chainWebpack: (config) => { config.resolve.alias .set("vue$", "vue/dist/vue.esm.js"); }, };
main.js 全局注册
// vue-code-view import CodeView from "vue-code-view"; Vue.use(CodeView);
参数配置
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| themeMode | 主题theme mode,默认light,支持 dark | `` 或 dark | `` | |
| showCode | 是否显示代码编辑器,只有在layout值为top生效 | boolean | false |
| source | 运行示例源码 | string | - | |
| layout | render 视图布局 | top 或 right 或 left | top | 0.4.0 |
个人感觉手册里配置写的不是很好，使用者不知道具体怎么使用，可以参考下面我的使用方法
新建vue单文件
<script> const code_example = `<template> <div id="app"> <img alt="Vue logo" class="logo" src="http://rq2l4zm0j.hd-bkt.clouddn.com/chatGPT.png" /> <h1>Welcome to Vue.js !</h1> </div> </template> `; export default { name: "demo", render() { return ( <div> <code-viewer source={code_example} showCode={true} layout={`right`} themeMode={`light`} ></code-viewer> </div> ); }, }; </script> <style scoped lang=scss> /* code-viewer */ .vue-repl { height: 800px; } </style>
组件库混合使用
项目引入其他组件库后，组件的示例源代码中直接使用即可，实现预览调试功能
错误处理
组件内置了错误预处理，目前支持代码为空、代码格式错误（内容不存在）等，以文字的形式显示在示例区域，也提供了自定义错误方式 errorHandler（使用 Notice 组件进行信息告知）。
render() { return ( <div > <code-viewer source={code_example} showCode={false} errorHandler={(errorMsg) => { this.$notify.error({ title: "Info", message: errorMsg, }); }} ></code-viewer> </div> ) }
示例使用了antd vue 的 notify组件进行消息提醒，效果如下：
下班~
