将 vue文件转为字符串在Codemirror里面展示

第一种直接引入

import index from "./FFCesiumExample/basicOperationInterface/addIconMap.vue?raw";

index直接就是字符串。但是出现一个问题就是build的时候可以出警告,。so还有第二种

const readFile = (filePath) => {
  // 创建一个新的xhr对象
  let xhr = null;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    // eslint-disable-next-line
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  const okStatus = document.location.protocol === "file" ? 0 : 200;
  xhr.open("GET", filePath, false);
  xhr.overrideMimeType("text/html;charset=utf-8");
  xhr.send(null);
  return xhr.status === okStatus ? xhr.responseText : null;
};

使用时:

传入url文件路径


let inedx =  readFile(url);

嘎嘎嘎就好了

然后codemirror使用

<Codemirror
      class="experience-editor-code"
      v-model:value="code"
      :options="cmOptions"
      border
      ref="myCm"
    >
    </Codemirror>

//伪代码
code.value = index

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/669558.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

查看VUE3代理后真正请求的URL

在vite.config.ts中添加如下配置&#xff1a; server: {host: "0.0.0.0", // 指定服务器应该监听哪个 IP 地址port: 8848, // 指定开发服务器端口open: true, // 开发服务器启动时&#xff0c;自动在浏览器中打开应用程序cors: true,// Load proxy configuration fr…

【TB作品】MSP430G2553单片机,智能储物柜

智能储物柜将实现的功能&#xff1a; 1在超市或者机场场景下&#xff0c;用户需要进行物品暂存时。按下储物柜键盘的需求按键&#xff0c;智能储物柜将会随机为用户分配一个还没使用的柜子&#xff0c;屏幕提示用户选择密码存储方式或者身份证存储方式&#xff1b; 2 用户选择密…

【JavaEE进阶】——Mybatis操作数据库(使用注解和XML方式)

目录 &#x1f6a9;三层架构 &#x1f388;JDBC操作回顾 &#x1f6a9;什么是MyBatis &#x1f6a9;MyBatis⼊⻔ &#x1f388;准备工作 &#x1f4dd;创建⼯程 &#x1f4dd;数据准备 &#x1f388;配置数据库连接字符串 &#x1f388;写持久层代码 &#x1f388;单…

【基本数据结构】平衡二叉树

文章目录 前言平衡二叉树1 简介2 旋转2.1 左旋2.2 右旋2.3 何时旋转 3 插入节点4 删除节点5 代码 参考资料写在最后 前言 本系列专注更新基本数据结构&#xff0c;现有以下文章&#xff1a; 【算法与数据结构】数组. 【算法与数据结构】链表. 【算法与数据结构】哈希表. 【…

33【Aseprite 作图】树——拆解

1 树叶 画树叶真累啊&#xff0c;可以先画一个轮廓&#xff0c;细节一点点修 2 1 2 &#xff1b;2 2 2 &#xff08;横着横&#xff09;&#xff0c;这样一点点画树叶 填充颜色&#xff0c;用了喷雾工具 2 树干部分 轮廓部分&#xff0c;左边的是3 3 3 &#xff1b;上下都是…

从不同角度看如何让大模型变得更聪明呢?

算法创新&#xff0c;从代码上优化大模型&#xff0c;可以采取一系列策略来提升其性能和效率。 算法优化&#xff1a;对模型的算法进行精细调整&#xff0c;如改进神经网络架构&#xff0c;使用更高效的层&#xff08;如深度可分离卷积&#xff09;&#xff0c;或者优化递归神经…

前端地图中,已知一个点位,获取相同经度或者纬度下的,某个距离的另一个点位

效果图说明&#xff1a;我在圆的中心点位&#xff0c;找到他某个直线距离的另个一点&#xff0c;标注两者之间的距离。如图所示是25000米。 沿纬度方向移动 在相同经度下&#xff0c;计算沿纬度方向移动1000米的新点位&#xff1a; function calculateLatitudePoint(lat, ln…

回归预测 | MATLAB实现基于GOOSE-LightGBM的多特征输入单输出数据回归预测(鹅优化算法)

回归预测 | MATLAB实现基于GOOSE-LightGBM的多特征输入单输出数据回归预测(鹅优化算法) 目录 回归预测 | MATLAB实现基于GOOSE-LightGBM的多特征输入单输出数据回归预测(鹅优化算法)效果一览基本介绍程序设计参考资料 效果一览 基本介绍 MATLAB实现基于LightGBM算法的数据回归预…

Qt第三方库QicsTable简单实例(1)

闲来无事&#xff0c;无意间看到一个Qics表格操作第三方库&#xff0c;自己写了一个特别简单的实例&#xff0c;效果如图所示&#xff1a; 操作界面的数据还是特别快的&#xff0c;因为使用了模型

java并发处理机制

在Java中&#xff0c;并发处理机制主要是通过线程来实现的。Java提供了丰富的类和接口来支持多线程编程&#xff0c;主要集中在 java.util.concurrent 包中。以下是一些关键的并发处理机制&#xff1a; 1.线程创建&#xff1a;可以通过继承 Thread 类或实现 Runnable 接口来创建…

前端Vue小兔鲜儿电商项目实战Day06

一、本地购物车 - 列表购物车 1. 基础内容渲染 ①准备模板 - src/views/cartList/index.vue <script setup> const cartList [] </script><template><div class"xtx-cart-page"><div class"container m-top-20"><div…

C语言:如何写文档注释、内嵌注释、行块注释?

技术答疑流程 扫描二维码&#xff0c;添加个人微信&#xff1b;支付一半费用&#xff0c;获取答案&#xff1b;如果满意&#xff0c;则支付另一半费用&#xff1b; 知识点费用&#xff1a;10元 项目费用&#xff1a;如果有项目任务外包需求&#xff0c;可以微信私聊

Wpf 使用 Prism 实战开发Day31

登录数据绑定 1.首先在LoginViewModel 登录逻辑处理类中&#xff0c;创建登录要绑定属性和命令 public class LoginViewModel : BindableBase, IDialogAware {public LoginViewModel(){ExecuteCommand new DelegateCommand<string>(Execure);}public string Title { ge…

Arduino烧录esp8266

default_encoding: cp936 Assume aggressive ‘core.a’ caching enabled. Note: optional global include file ‘arduino_modified_sketch_764314\Blink.ino.globals.h’ does not exist. Read more at https://arduino-esp8266.readthedocs.io/en/latest/faq/a06-global-bui…

数据管理知识体系必知的14张语境关系图

近期对数据管理知识体系中的语境关系图进行了整体学习梳理,总共有14张图,具体如下,供大家参考。应该说语境关系图和环境因素六边形图是各有侧重、互为补充关系。语境关系图是环境因素六边形图的细化,描述了每个知识领域中的细节,相当于数据管理的微观视角, 包括与人员、 …

秒杀基本功能开发(显示商品列表和商品详情)

文章目录 1.数据库表设计1.商品表2.秒杀商品表3.修改一下秒杀时间为今天到明天 2.pojo和vo编写1.com/sxs/seckill/pojo/Goods.java2.com/sxs/seckill/pojo/SeckillGoods.java3.com/sxs/seckill/vo/GoodsVo.java 3.Mapper编写1.GoodsMapper.java2.GoodsMapper.xml3.分别编写Seck…

JCR一区级 | Matlab实现TCN-LSTM-MATT时间卷积长短期记忆神经网络多特征分类预测

JCR一区级 | Matlab实现TCN-LSTM-MATT时间卷积长短期记忆神经网络多特征分类预测 目录 JCR一区级 | Matlab实现TCN-LSTM-MATT时间卷积长短期记忆神经网络多特征分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 1.JCR一区级 | Matlab实现TCN-LSTM-MATT时间卷积长短…

用户画像知识点补充——多数据源

引入 针对用户画像项目来说&#xff08;产品&#xff09;必须要支持从多种数据源加载业务数据&#xff0c;构建用户标签。 在之前的标签模型开发中&#xff0c;主要是为了简化开发复杂度&#xff0c;业务数据统一存储到HBase表中。 数据源包含如下几个方面&#xff1a; 存储H…

民国漫画杂志《时代漫画》第38期.PDF

时代漫画38.PDF: https://url03.ctfile.com/f/1779803-1248636380-dd7daa?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了&#xff0c;截止1937年6月战争来临被迫停刊共发行了39期。 ps: 资源来源网络!

R19 NR移动性增强概况

随着5G/5G-A技术不断发展和业务需求的持续增强&#xff0c;未来网络的部署将不断向高频演进。高频小区的覆盖范围小&#xff0c;用户将面临更为频繁的小区选择、重选、切换等移动性过程。 为了提升网络移动性能和保障用户体验&#xff0c;移动性增强一直是3GPP的热点课题。从NR…