位置: 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)

  • 三星buds2怎么开启游戏模式(三星buds2怎么开机)

    三星buds2怎么开启游戏模式(三星buds2怎么开机)

  • usb驱动怎么安装(电脑安装usb驱动怎么安装)

    usb驱动怎么安装(电脑安装usb驱动怎么安装)

  • 华为nova6颜色有哪些呢(华为nova6颜色有几种)

    华为nova6颜色有哪些呢(华为nova6颜色有几种)

  • 小程序链接怎么朋友圈(小程序链接怎么变成网页链接)

    小程序链接怎么朋友圈(小程序链接怎么变成网页链接)

  • 华为手机锁屏账号是什么情况(华为锁屏在哪儿)

    华为手机锁屏账号是什么情况(华为锁屏在哪儿)

  • gm1910是什么手机(gm1915是什么手机)

    gm1910是什么手机(gm1915是什么手机)

  • 手机一充电就有广告推送怎么办(手机一充电就有滴答声)

    手机一充电就有广告推送怎么办(手机一充电就有滴答声)

  • 手机链接打印机字体怎么调(怎么手机链接打印机)

    手机链接打印机字体怎么调(怎么手机链接打印机)

  • powerpoint就是ppt吗(powerpoint属于)

    powerpoint就是ppt吗(powerpoint属于)

  • 苹果手机数据漫游需要打开吗(苹果手机数据漫游什么意思)

    苹果手机数据漫游需要打开吗(苹果手机数据漫游什么意思)

  • 华为p40支持快充吗(华为p40多少瓦快充)

    华为p40支持快充吗(华为p40多少瓦快充)

  • 怎么判断微博被屏蔽了(怎么判断微博被超话主持人屏蔽)

    怎么判断微博被屏蔽了(怎么判断微博被超话主持人屏蔽)

  • 充电宝充电慢是什么原因(充电宝充电慢是数据线的原因吗)

    充电宝充电慢是什么原因(充电宝充电慢是数据线的原因吗)

  • 内存卡v10是什么意思(内存卡上的v10和v30都什么意思)

    内存卡v10是什么意思(内存卡上的v10和v30都什么意思)

  • 苹果公司有投诉电话吗(苹果公司中国投诉电话是多少)

    苹果公司有投诉电话吗(苹果公司中国投诉电话是多少)

  • vue时间怎么改(vue 当前时间)

    vue时间怎么改(vue 当前时间)

  • 手提电脑怎么强制关机(手提电脑配置怎么选)

    手提电脑怎么强制关机(手提电脑配置怎么选)

  • 小米9pro输入法怎么设置(小米9pro输入法复制粘贴板)

    小米9pro输入法怎么设置(小米9pro输入法复制粘贴板)

  • 荣耀v30支持光学防抖吗(荣耀v30pro几倍光学)

    荣耀v30支持光学防抖吗(荣耀v30pro几倍光学)

  • 小米全屏手机返回键在哪(小米手机怎么把全面屏手机的返回键调整位置)

    小米全屏手机返回键在哪(小米手机怎么把全面屏手机的返回键调整位置)

  • 淘宝备注了为什么订单详情没有(淘宝备注了为什么消失了)

    淘宝备注了为什么订单详情没有(淘宝备注了为什么消失了)

  • 三星s8关机了能定位吗(三星2018关机)

    三星s8关机了能定位吗(三星2018关机)

  • win10硬盘分区格式(win10硬盘分区格式是GUID格式,win7的是MBR格式)

    win10硬盘分区格式(win10硬盘分区格式是GUID格式,win7的是MBR格式)

  • 天猫如何投诉商家电话(天猫如何投诉商家客服)

    天猫如何投诉商家电话(天猫如何投诉商家客服)

  • diagent.exe是什么进程  diagent进程有什么作用(dghm.exe是什么程序)

    diagent.exe是什么进程 diagent进程有什么作用(dghm.exe是什么程序)

  • 异常:TypeError: ‘caller‘, ‘callee‘, and ‘arguments‘ properties may not be accessed on strict mode func(异常生物见闻录)

    异常:TypeError: ‘caller‘, ‘callee‘, and ‘arguments‘ properties may not be accessed on strict mode func(异常生物见闻录)

  • 纯前端导出表格(前端数据导出为excel)

    纯前端导出表格(前端数据导出为excel)

  • rht-vmctl命令  控制虚拟机系统(vgremove命令)

    rht-vmctl命令 控制虚拟机系统(vgremove命令)

  • 事业单位长期股权投资持有期间被投资单位
  • 出差误餐补助是谁承担
  • 发票的红冲和作废有何区别
  • 小规模纳税人一个季度多少免税
  • 政府机关车辆拍卖
  • 构成业务和不构成业务的会计处理
  • 水泥沙子开票属于什么类别
  • 机动车换车
  • 买赠活动怎么账务处理
  • 异地施工缴税增值税交多少
  • 抵账房产财务入账
  • 公司办公室收到上级主管部门的一份
  • 存货和应付账款
  • 用理财产品去抵债违法吗
  • 营改增后小规模纳税人所得税
  • 退税勾选后如何开红字
  • 增值税发票对方已认证怎么冲红
  • 旅游企业小规模纳税人差额征收
  • 7月3日事业单位
  • 企业为一般纳税人税率多少
  • 年薪超过12万交多少税
  • 软件服务费是什么
  • 开票金额开多了,对公司有影响吗
  • 专票记账联丢失了要罚款吗
  • 购进生产用原材料,取得增值税专用发票注明税额25600元
  • 娱乐行业缴税
  • 增值税普票可以抵扣税吗
  • 如何在Excel中合并计算
  • win10专业版激活密钥永久2023
  • 跨年发票能不能报销
  • 电子税务局变更办税人员怎么操作
  • 会计科目暂存款是什么意思
  • 代理业务资产的意思
  • 公司股东内部转让需要人脸识别吗
  • win7旗舰版系统激活工具
  • php timeout
  • 发票填开有哪些规范性要求
  • 如何批量清理桌面
  • 固定资产生产经营期间正常报废产生的净收益
  • vue如何销毁页面
  • 因质量问题免费赔偿
  • 树莓派能干什么
  • php标准数据类型共有四种
  • 为什么电子章打印出是黑色的
  • 为etc充值
  • 学生誓词最新2022年
  • 营业外收入需要报增值税吗
  • 本月无开票企业怎么报税
  • wordpress 批量添加标签
  • python中排序
  • mysql 使用索引
  • mysql监控sql性能
  • 基本户与一般户的作用
  • 企业收据的相关法律规定
  • 经营活动的现金流量占全部现金流量的比重越大
  • 保理公司的钱来自哪里
  • 暂估入库的商品作暂估冲红会计分录
  • 机票的退票费可以开具发票吗
  • 独立核算的生产车间是法律主体吗
  • 原始股卖出需要缴税吗
  • 转让无形资产使用权税率
  • 在胖东来买到过期的食品
  • 三证合一是哪三证
  • 固定资产一次性加速折旧
  • 纳税人财务会计制度
  • 免税收入怎么做分录
  • 成本会计难做吗没做过
  • ubuntu20设置
  • centos6.5查看cpu信息
  • avgorange是什么文件
  • linux nmap扫描端口
  • cocos2d-x教程
  • 页面模板排序
  • jquery+ajax实现省市区三级联动效果简单示例
  • unity通过脚本控制骨骼节点让模型动起来
  • nodejs fs.open
  • unity安卓手机游戏官网
  • [置顶]马粥街残酷史
  • 预交增值税附加税率
  • 车辆购置税计入固定资产一起折旧吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设