位置: IT常识 - 正文

【vue】vue 在线编辑、实时预览的代码交互组件 vue-code-view(vue+)

编辑:rootadmin
【vue】vue 在线编辑、实时预览的代码交互组件 vue-code-view 文章目录前言实现安装依赖vue.config.js配置main.js 全局注册参数配置新建vue单文件组件库混合使用错误处理前言

推荐整理分享【vue】vue 在线编辑、实时预览的代码交互组件 vue-code-view(vue+),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue?,vue+,vue在线教程,vue在线教程,vue!,vue.org,vue!,vue在线教程,内容如对您有帮助,希望把文章链接给更多的朋友!

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# oryarn add vue-code-viewvue.config.js配置【vue】vue 在线编辑、实时预览的代码交互组件 vue-code-view(vue+)

注意:这里用的是or(或)

module.exports = { runtimeCompiler: true, // or chainWebpack: (config) => { config.resolve.alias .set("vue$", "vue/dist/vue.esm.js"); },}; main.js 全局注册// vue-code-viewimport CodeView from "vue-code-view";Vue.use(CodeView);参数配置参数说明类型默认值版本themeMode主题theme mode,默认light,支持 dark`` 或 dark``showCode是否显示代码编辑器,只有在layout值为top生效booleanfalsesource运行示例源码string-layoutrender 视图布局top 或 right 或 lefttop0.4.0

个人感觉手册里配置写的不是很好,使用者不知道具体怎么使用,可以参考下面我的使用方法

新建vue单文件<script>const code_example = `<template> <div id="app"> <img alt="Vue logo" class="logo" src="https://www.yuucn.com/wp-content/uploads/2023/05/1684248044-a9ca298e41e926e.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组件进行消息提醒,效果如下:

下班~

本文链接地址:https://www.jiuchutong.com/zhishi/290265.html 转载请保留说明!

上一篇:奥林匹克国家公园中的可可西里雨林,华盛顿州 (© Jorge Romano/Offset by Shutterstock)(奥林匹克国家公园)

下一篇:Vue3+TypeScript项目报错: 找不到名称“require”。是否需要为节点安装类型定义?(vue-cli typescript)

  • 微信怎么取消自动扣费(微信怎么取消自动删除聊天记录)

    微信怎么取消自动扣费(微信怎么取消自动删除聊天记录)

  • 视频导入pr后音画不同步(视频导入pr后音频变小)

    视频导入pr后音画不同步(视频导入pr后音频变小)

  • 苹果手机怎么设置小圆点出来(苹果手机怎么设置来电闪光灯闪烁)

    苹果手机怎么设置小圆点出来(苹果手机怎么设置来电闪光灯闪烁)

  • 极速退款是填写单号就给退吗(极速退款是填写退货单吗)

    极速退款是填写单号就给退吗(极速退款是填写退货单吗)

  • pac模式和全局模式有什么区别(pac代理和全局代理区别)

    pac模式和全局模式有什么区别(pac代理和全局代理区别)

  • 大王卡怎么换普通套餐(大王卡怎么换成普通)

    大王卡怎么换普通套餐(大王卡怎么换成普通)

  • 三星s8如何退出安全模式(三星手机怎么退出程序运行)

    三星s8如何退出安全模式(三星手机怎么退出程序运行)

  • 通过微信红包可以找回已删除好友吗(通过微信红包可以证明对方身份吗)

    通过微信红包可以找回已删除好友吗(通过微信红包可以证明对方身份吗)

  • 小米手机被屏蔽的短信去哪看(小米手机被屏蔽的短信怎么恢复)

    小米手机被屏蔽的短信去哪看(小米手机被屏蔽的短信怎么恢复)

  • ios获取新数据要不要关(苹果手机获取新数据有啥用)

    ios获取新数据要不要关(苹果手机获取新数据有啥用)

  • 电脑开机显示f1f2怎么办(电脑开机显示f1f2)

    电脑开机显示f1f2怎么办(电脑开机显示f1f2)

  • ddr4和ddr5的区别(电脑内存条ddr4和ddr5的区别)

    ddr4和ddr5的区别(电脑内存条ddr4和ddr5的区别)

  • 苹果充电线不用原装的有影响吗(苹果充电线不用原装头冲上电ma)

    苹果充电线不用原装的有影响吗(苹果充电线不用原装头冲上电ma)

  • 华为手机怎样设置快捷返回键(华为手机怎样设置锁屏壁纸)

    华为手机怎样设置快捷返回键(华为手机怎样设置锁屏壁纸)

  • 为什么pr视频变绿了(为什么pr视频变紫色)

    为什么pr视频变绿了(为什么pr视频变紫色)

  • 数据库系统的核心组成部分(数据库及其应用)

    数据库系统的核心组成部分(数据库及其应用)

  • dvid接口是什么(dvi-d接口有什么用)

    dvid接口是什么(dvi-d接口有什么用)

  • 窗口化快捷键是什么(快速窗口化)

    窗口化快捷键是什么(快速窗口化)

  • 华为手表防水不(华为手表防水不防尘)

    华为手表防水不(华为手表防水不防尘)

  • 手机发不出短信是什么原因(手机发不出短信显示发送失败)

    手机发不出短信是什么原因(手机发不出短信显示发送失败)

  • 横屏模式是什么意思(横屏功能)

    横屏模式是什么意思(横屏功能)

  • 华为mate20pro能用水洗吗(华为mate20pro能用6a数据线吗)

    华为mate20pro能用水洗吗(华为mate20pro能用6a数据线吗)

  • 华为mate30是否支持5g网络(mate30支持)

    华为mate30是否支持5g网络(mate30支持)

  • 微信模板消息是什么(微信模板消息设置格式)

    微信模板消息是什么(微信模板消息设置格式)

  • 天猫超市是当天送达吗(天猫超市是当天送货上门吗)

    天猫超市是当天送达吗(天猫超市是当天送货上门吗)

  • 印花税进什么费用
  • 税盘维护费的账务处理
  • 结转本年利润要扣除企业所得税吗
  • 下列不属于流动资产的
  • 非限定性净资产借贷方向
  • 申报成功忘记清关怎么办
  • 公司对公账户给员工发工资税是谁扣
  • 丢失发票已报税证明单取消
  • 固定资产清理在财务报表哪里体现
  • 不良产品出库维护制度
  • 销售回扣的账务处理办法
  • 公司开发票要交多少钱的税?
  • 自然人纳税系统
  • 企业以前年度的亏损在哪查
  • 代为持股有没有法律效应
  • 政府委托代建的房地产公司是否可以开立农民工工资
  • 海关进口增值税和关税怎么入账
  • 神州战神笔记本怎么进入不了bios
  • 利用Windows Media将二进制文件转音频
  • 支付工会经费
  • 电脑上一键复制是哪个键
  • 异地使用支票的提示付款期限
  • 折扣销售的定义
  • 年终奖发放问题
  • phpcms怎么用
  • 提前支付的费用记账
  • 南极岛在哪
  • IIS 7.5 asp Session超时时间设置方法
  • idea可以编写vue吗
  • 核心书评价格
  • vue入门
  • 应用加载慢
  • php array_slice 取出数组中的一段序列实例
  • 将本月发生的制造费用总额按生产工人
  • 如何处理经营租赁合同
  • dom事件种类
  • 完美解决怠速抖动加油就平稳
  • python 文件判断
  • 员工手机补助单怎么做账
  • 燃油税税率是多少
  • 企业卖地收入会计处理
  • 销售收入未开票
  • 其他应收款主要核算什么
  • 原材料用于加工什么
  • PostgreSQL教程(二十):PL/pgSQL过程语言
  • 新会计准则股权投资
  • 企业的股息红利所得要交税吗
  • 以前年度损益调整怎么做账
  • 个人独资企业法主要内容
  • 免税饲料做为免税吗
  • 转让股权取得的收入是营业收入吗
  • 外币折算差额怎么计算
  • 员工体检费计入什么会计科目里
  • 公司发放工资的形式
  • 公认会计原则是哪个国家的?
  • 哪些固定资产不计提折旧
  • 预提业务
  • 实例讲解液化滤镜瘦身
  • mysql同步问题之Slave延迟很大优化方法
  • mysql保存命令
  • winkey.exe - winkey是什么进程
  • xp局域网文件共享设置
  • win7无网激活
  • win7运行速度
  • linux虚拟空间
  • cocos做游戏
  • bass表示什么
  • 如何解决android代码红线
  • batch批处理
  • 批处理修改文件名称
  • vue stylus
  • js原生dialog
  • unity 2021.2
  • 已知税率怎么求政府税收
  • 云南税务网上税务局
  • 购买的土地没有土地使用证
  • 重庆税务总局重庆电子税务局
  • 国家税务总局上海税务局(个人)
  • 国家税务总局每家公司都可以注册吗
  • 为什么消费税是价内税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设