vue3+ts+lightweight-charts

已于 2024-04-24 13:36:29 修改
阅读量198 收藏 4
点赞数 7
文章标签： javascript 前端 vue.js
于 2024-04-24 13:34:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52335582/article/details/138155205
版权
1.以k线图为例, 首先简单的绘制一下

x-charts.ts

import { createChart } from 'lightweight-charts';
const stickOption = {
  localization: {
    locale: 'en-US'
  },
  layout: {
    textColor: 'black',
    background: { type: 'solid', color: 'white' }
  },
  timeScale: {
    borderColor: '#F5F5F5',
    timeZone: 'Etc/UTC'
  },
  height: 400
};

// 创建k线图
let stickChart: any = null;
const stickChartInit = (domId: string) => {
  stickChart = createChart(
    document.getElementById(domId) as HTMLElement,
    stickOption as any
  );
};

// 渲染k线图
let stickSeries: any = null;
const stickSyncToInterval = (data: any) => {
  if (stickSeries) {
    stickChart.removeSeries(stickSeries);
    stickSeries = null;
  }
  stickSeries = stickChart.addCandlestickSeries({
    upColor: '#18B762',
    downColor: '#E8503A',
    borderVisible: false,
    wickUpColor: '#18B762',
    wickDownColor: '#E8503A'
  });
  stickSeries.setData(data);
  stickChart.timeScale().fitContent();
};

// 清除
const closeCharts = () => {
  stickSeries = null;
};

export default {
  stickChartInit,
  stickSyncToInterval,
  closeCharts
};

在vue代码中

<template>
  <div id="Kcharts" style="width: 100vw;"></div>
</template>

<script setup lang="ts">
// 导入封装的文件
import xCharts from './x.charts';

// 假数据, 数据open, close, high, low, 类型必须为number否则图表报错
 const list = [
      {
        open: 49.2,
        close: 52.5,
        high: 52.9,
        low: 49.2,
        time: '2024-01-01'
      },
      {
        open: 52.85,
        close: 56.65,
        high: 60.1,
        low: 52.2,
        time: '2024-01-02'
      },
      {
        open: 56.8,
        close: 55.55,
        high: 57.5,
        low: 54.75,
        time: '2024-01-03'
      },
      {
        open: 55.9,
        close: 55.15,
        high: 56.4,
        low: 54.9,
        time: '2024-01-04'
      },
      {
        open: 54.9,
        close: 53.65,
        high: 55.45,
        low: 52,
        time: '2024-01-05'
      },
      {
        open: 53.85,
        close: 54.1,
        high: 54.6,
        low: 53.45,
        time: '2024-01-08'
      },
      {
        open: 54.9,
        close: 54.8,
        high: 56.45,
        low: 54.5,
        time: '2024-01-09'
      },
      {
        open: 54.3,
        close: 53,
        high: 54.9,
        low: 52.45,
        time: '2024-01-10'
      },
      {
        open: 53.35,
        close: 52.05,
        high: 54.3,
        low: 51.65,
        time: '2024-01-11'
      },
      {
        open: 53.5,
        close: 55,
        high: 57.9,
        low: 53.5,
        time: '2024-01-12'
      },
      {
        open: 55,
        close: 55,
        high: 55,
        low: 55,
        time: '2024-01-15'
      },
      {
        open: 56,
        close: 54.2,
        high: 56.85,
        low: 53.45,
        time: '2024-01-16'
      },
      {
        open: 53.05,
        close: 53.6,
        high: 55.45,
        low: 52.7,
        time: '2024-01-17'
      },
      {
        open: 53.5,
        close: 52.95,
        high: 53.95,
        low: 51.5,
        time: '2024-01-18'
      },
      {
        open: 53.4,
        close: 54,
        high: 54.85,
        low: 53,
        time: '2024-01-19'
      },
      {
        open: 54,
        close: 55.6,
        high: 56.85,
        low: 53.4,
        time: '2024-01-20'
      },
      {
        open: 56.55,
        close: 56.15,
        high: 60.8,
        low: 55.55,
        time: '2024-01-23'
      },
      {
        open: 56.9,
        close: 57.2,
        high: 59.1,
        low: 55.05,
        time: '2024-01-24'
      },
      {
        open: 58,
        close: 57.75,
        high: 58.45,
        low: 56.95,
        time: '2024-01-25'
      },
      {
        open: 57.45,
        close: 59.85,
        high: 61.4,
        low: 56.85,
        time: '2024-01-29'
      },
      {
        open: 60,
        close: 60.6,
        high: 62,
        low: 60,
        time: '2024-01-30'
      },
      {
        open: 60.6,
        close: 61.55,
        high: 63.9,
        low: 59,
        time: '2024-01-31'
      },
      {
        open: 60,
        close: 57.5,
        high: 60,
        low: 56.3,
        time: '2024-02-01'
      },
      {
        open: 58.1,
        close: 56.9,
        high: 58.8,
        low: 6.6,
        time: '2024-02-02'
      },
      {
        open: 56.5,
        close: 54,
        high: 57.2,
        low: 53.6,
        time: '2024-02-08'
      },
      {
        open: 54.4,
        close: 50.25,
        high: 54.5,
        low: 48.85,
        time: '2024-02-09'
      },
      {
        open: 50.5,
        close: 48.25,
        high: 51.8,
        low: 47.85,
        time: '2024-02-12'
      },
      {
        open: 48.45,
        close: 47.95,
        high: 48.7,
        low: 44.85,
        time: '2024-02-13'
      },
      {
        open: 7.15,
        close: 49.25,
        high: 49.8,
        low: 46.9,
        time: '2024-02-14'
      }
    ];

onMounted(() => {
      xCharts.stickChartInit('Kcharts');
      xCharts.stickSyncToInterval(list);
    });
</script>

 画出k线图

2.如果需要多图绘制在同一张charts中，以柱状图为例， 需要对x-charts文件中的一些方法做修改

 x-charts.ts

import { createChart } from 'lightweight-charts';
const stickOption = {
  localization: {
    locale: 'en-US'
  },
  layout: {
    textColor: 'black',
    background: { type: 'solid', color: 'white' }
  },
  timeScale: {
    borderColor: '#F5F5F5',
    timeZone: 'Etc/UTC'
  },
  rightPriceScale: {
    // 设置的k线图的上下距离，防止和柱状图重叠
    scaleMargins: {
      top: 0.4,
      bottom: 0.25
    },
    borderColor: '#F5F5F5'
  },
  height: 400
};

// 创建图表
let stickChart: any = null;
const stickChartInit = (domId: string) => {
  stickChart = createChart(
    document.getElementById(domId) as HTMLElement,
    stickOption as any
  );
};

// 渲染k线图和柱状图
let stickSeries: any = null;
let sHisSeries: any = null;
const stickSyncToInterval = (data: any, hdata: any) => {
  if (stickSeries) {
    stickChart.removeSeries(stickSeries);
    stickSeries = null;
  }
  if (sHisSeries) {
    stickChart.removeSeries(sHisSeries);
    sHisSeries = null;
  }
  stickSeries = stickChart.addCandlestickSeries({
    upColor: '#18B762',
    downColor: '#E8503A',
    borderVisible: false,
    wickUpColor: '#18B762',
    wickDownColor: '#E8503A'
  });
  // 同时渲染柱状图
  sHisSeries = stickChart.addHistogramSeries({
    color: '#F1F5F9',
    priceFormat: {
      type: 'volume'
    },
    priceScaleId: ''
  });
  stickChart.priceScale('').applyOptions({
    // 设置的柱状图上下距离 防止和k线重叠
    scaleMargins: {
      top: 0.8,
      bottom: 0
    }
  });
  stickSeries.setData(data);
  sHisSeries.setData(hdata);
  stickChart.timeScale().fitContent();
};

// 清除
const closeCharts = () => {
  stickSeries = null;
  sHisSeries = null;
};

export default {
  stickChartInit,
  stickSyncToInterval,
  closeCharts
};

在vue代码中

<template>
  <div id="Kcharts" style="width: 100vw;"></div>
</template>

<script setup lang="ts">
// 导入封装的文件
import xCharts from './x.charts';

// 假数据, 数据open, close, high, low, 类型必须为number否则图表报错
 const list = [
      {
        open: 49.2,
        close: 52.5,
        high: 52.9,
        low: 49.2,
        time: '2024-01-01'
      },
      {
        open: 52.85,
        close: 56.65,
        high: 60.1,
        low: 52.2,
        time: '2024-01-02'
      },
      {
        open: 56.8,
        close: 55.55,
        high: 57.5,
        low: 54.75,
        time: '2024-01-03'
      },
      {
        open: 55.9,
        close: 55.15,
        high: 56.4,
        low: 54.9,
        time: '2024-01-04'
      },
      {
        open: 54.9,
        close: 53.65,
        high: 55.45,
        low: 52,
        time: '2024-01-05'
      },
      {
        open: 53.85,
        close: 54.1,
        high: 54.6,
        low: 53.45,
        time: '2024-01-08'
      },
      {
        open: 54.9,
        close: 54.8,
        high: 56.45,
        low: 54.5,
        time: '2024-01-09'
      },
      {
        open: 54.3,
        close: 53,
        high: 54.9,
        low: 52.45,
        time: '2024-01-10'
      },
      {
        open: 53.35,
        close: 52.05,
        high: 54.3,
        low: 51.65,
        time: '2024-01-11'
      },
      {
        open: 53.5,
        close: 55,
        high: 57.9,
        low: 53.5,
        time: '2024-01-12'
      },
      {
        open: 55,
        close: 55,
        high: 55,
        low: 55,
        time: '2024-01-15'
      },
      {
        open: 56,
        close: 54.2,
        high: 56.85,
        low: 53.45,
        time: '2024-01-16'
      },
      {
        open: 53.05,
        close: 53.6,
        high: 55.45,
        low: 52.7,
        time: '2024-01-17'
      },
      {
        open: 53.5,
        close: 52.95,
        high: 53.95,
        low: 51.5,
        time: '2024-01-18'
      },
      {
        open: 53.4,
        close: 54,
        high: 54.85,
        low: 53,
        time: '2024-01-19'
      },
      {
        open: 54,
        close: 55.6,
        high: 56.85,
        low: 53.4,
        time: '2024-01-20'
      },
      {
        open: 56.55,
        close: 56.15,
        high: 60.8,
        low: 55.55,
        time: '2024-01-23'
      },
      {
        open: 56.9,
        close: 57.2,
        high: 59.1,
        low: 55.05,
        time: '2024-01-24'
      },
      {
        open: 58,
        close: 57.75,
        high: 58.45,
        low: 56.95,
        time: '2024-01-25'
      },
      {
        open: 57.45,
        close: 59.85,
        high: 61.4,
        low: 56.85,
        time: '2024-01-29'
      },
      {
        open: 60,
        close: 60.6,
        high: 62,
        low: 60,
        time: '2024-01-30'
      },
      {
        open: 60.6,
        close: 61.55,
        high: 63.9,
        low: 59,
        time: '2024-01-31'
      },
      {
        open: 60,
        close: 57.5,
        high: 60,
        low: 56.3,
        time: '2024-02-01'
      },
      {
        open: 58.1,
        close: 56.9,
        high: 58.8,
        low: 6.6,
        time: '2024-02-02'
      },
      {
        open: 56.5,
        close: 54,
        high: 57.2,
        low: 53.6,
        time: '2024-02-08'
      },
      {
        open: 54.4,
        close: 50.25,
        high: 54.5,
        low: 48.85,
        time: '2024-02-09'
      },
      {
        open: 50.5,
        close: 48.25,
        high: 51.8,
        low: 47.85,
        time: '2024-02-12'
      },
      {
        open: 48.45,
        close: 47.95,
        high: 48.7,
        low: 44.85,
        time: '2024-02-13'
      },
      {
        open: 7.15,
        close: 49.25,
        high: 49.8,
        low: 46.9,
        time: '2024-02-14'
      }
    ];
// 柱状图数据格式 { time, value }
    const hlist = list.map((item) => {
      return {
        value: item.close,
        time: item.time
      };
    });

onMounted(() => {
      xCharts.stickChartInit('Kcharts');
      xCharts.stickSyncToInterval(list, hlist);
    });
</script>

 3.怎么动态切换不同国家的时间格式

在 x-charts.ts中加上这段方法

const chartsLangChange = (lang: string) => {
  stickChart.timeScale().applyOptions({
    tickMarkFormatter: (time: any) => {
      const date = new Date(time);
      const formatter = new Intl.DateTimeFormat(lang); // 自定义日期格式
      return formatter.format(date);
    }
  });
};

在vue代码中通过按钮切换

<button @click="onLangChange('en-US')">英语</button>
<button @click="onLangChange('zh-CN')">中文</button>

const onLangChange = (lang: string) => {
      xCharts.chartsLangChange(lang);
    };

4.切换不同的日期区间数据

比如以天为区间/以小时为区间/以周为区间， 只需重新调用stickSyncToInterval方法传入新数据

注意尽量让后端返回的time时间字段转为Etc/UTC的时间戳格式，因为当返回的数据以小时或分钟来渲染的时候时间格式需要Etc/UTC

// 现在给的时间是字符串，当天每小时的数据，这种情况下会导致渲染报错
    const list = [
      {
        open: 49.2,
        close: 52.5,
        high: 52.9,
        low: 49.2,
        time: '2024-01-01 10:00:00'
      },
      {
        open: 52.85,
        close: 56.65,
        high: 60.1,
        low: 52.2,
        time: '2024-01-01 11:00:00'
      },
      {
        open: 56.8,
        close: 55.55,
        high: 57.5,
        low: 54.75,
        time: '2024-01-01 12:00:00'
      },
      {
        open: 55.9,
        close: 55.15,
        high: 56.4,
        low: 54.9,
        time: '2024-01-01 13:00:00'
      }
    ];

 会报错只支持yyyy-mm-dd的格式

 time字段需要UTC时间戳

HSL-
关注
  • 7
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios
lightweight-charts 日内数据如何显示
PrimaryColor
09-29 1592
配置代码： var chart = LightweightCharts.createChart(document.body, { width: 600, height: 300, layout: { backgroundColor: '#ffffff', textColor: 'rgba(33, 56, 77, 1)', }, grid: { vertLines: { color: 'rgba(197, 203, 206, 0.7)', }, horzLines:
moon:lightweight轻量级的Vue 3组件库
03-11
:crescent_moon: 月亮 轻量级的Vue 3组件库。 当您开始一个新的原型时，您希望能够快速开发功能。 我们创建此组件库是为了快速构建产品而无需处理复杂的软件包和庞大的捆绑包大小。 用法 首先使用您喜欢的软件包管理器安装库 yarn add moon 那么您可以像这样导入可用的组件 import { Button } from 'moon' 可用命令 这是所有可用的npm命令的列表。 启动开发环境我们使用Vue Press来保存我们的组件文档和示例 yarn dev 建立文件 yarn build 提供文档 yarn serve 构建库包 yarn build:library 使用捆绑包大小 yarn analyze
全栈-Vite3+Vue3+TS+Ant-design-vue3整合
11-07
全栈开发实战技术分享 前端:Vite3+Vue3+TS+Ant-design-vue3 后端:SpringBoot+MybatisPlus+Mysql
TradingViewLightweightCharts是最小和最快的金融HTML5图表
08-10
小巧的封装中的顶级性能。免费、开源和功能丰富。仅需43kb，轻量级交互式图表的梦想现已成为现实。HTML5 Canvas技术确保（与图片不同）此图表在任何设备上始终都是完美的。
vue 使用tradingview绘制折线图，资金图，以及一些配置说明
PrimaryColor
07-23 3885
tradingview的k线图和折线图不属于同一个项目，考虑到k线图代码量很多，折线图只是一个轻量级别的。 tradingview官网：https://cn.tradingview.com/lightweight-charts/ 折线图代码地址：https://github.com/tradingview/lightweight-charts 1.安装。 npm install lightweight-charts 2.引入和使用。 import { createChart } from
vue使用tradingview生成k线图（第一天）
PrimaryColor
07-20 3609
网上很多项目运行的时候没有问题，但是拷贝到自己的vue最新版里面去，就要报很多错误，一般情况都是因为创建k线图的时候配置有问题，这里我已经处理兼容新版vue的资源，需要的可以下载。 链接： https://download.csdn.net/download/qq_42740797/20372015 下载后的目录结构如图： 步骤一、引入js。 “custom_scripts”是k线图相关的js文件，vue项目需要放在“public”文件夹下，然后在public下的index.html文件中引入
Github每日精选（第87期）：轻量级图表lightweight-charts
haleycat的博客
01-11 2457
如果您想用交互式图表替换静态图像图表，它是您的最佳选择。该库的大小接近静态图像，但如果您的网页上有数十个图像图表，那么使用此库可以使您的网页的大小更小。如果您想在网页上将财务数据显示为交互式图表而不影响网页加载速度和性能，轻量级图表库是您的最佳选择。请注意，系列不能从一种类型转移到另一种类型，因为不同的系列类型具有不同的数据和选项类型。请注意，无论系列类型如何，API 调用都是相同的（尽管数据的类型可能不同）。在您的仓库中安装该库后，您就可以创建您的第一个图表了。要创建具有所需类型的系列，您需要使用。
vue 使用tradingview修改主题色等等配置（第二天）
PrimaryColor
07-22 3970
上一篇文件链接（关于引入文件的一些说明）： https://blog.csdn.net/qq_42740797/article/details/118931667 如果你不幸下载到了旧版，或者是网上的一些其他版本，可能在修改k线图的时候永远都改不动canvas元素的背景色，我当时也差不多处理了一天时间，最后一用官网的项目，直接就行了。 然后这里我将官网的项目和我的vue测试项目都上传了。 资源链接： 创作不易，希望支持，让我多赚点积分。 资源文件说明： charting_library：官网
svelte-lightweight-charts
04-04
该包装是用于的Svelte包装纸 该软件包正在开发中。 正在安装 npm install lightweight-charts svelte-lightweight-charts 用法 有两种使用此程序包的方法： 作为组件集 < script > import Chart from "svelte-lightweight-charts/components/chart.svelte" ; import LineSeries from "svelte-lightweight-charts/components/line-series.svelte" ; const data = [ { time : '2019-04-11' , value : 80.01 } , { time : '2019-04-12' , value : 96.
uni-app+Vue3+pinia+uview-plus搭建的项目包
最新发布
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）
05-03
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）；精简版是基于 vue-pure-admin 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 element-plus 的情况下仍然低于 2.3MB，并且会永久同步完整版的代码。
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia
awesome-vue
大灰狼的小绵羊哥哥的博客
03-26 1万+
Awesome Vue.js  https://github.com/vuejs/awesome-vue A curated list of awesome things related to Vue.js Resources Official ResourcesExternal ResourcesJob PortalCommunityPodcastsOfficia
vue丰富的图表（vue接入v-charts）
hank的博客
03-19 2万+
vue丰富的图表（vue接入v-charts） v-charts介绍： 在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表 官网 v-charts demo效果 ...
vue项目中vue-echarts讲解及常用图表方案实现
热门推荐
小圣贤君的博客
04-22 11万+
图表类的项目操作一般常见于管理平台系统，移动端项目中并不是特别常见，不常见不代表没有，在一些商城类应用中，商家需要看到商品的销量分析，盈利分析等，就需要用到图标，比较常用的图标库，像百度的ECHARTS，蚂蚁金服的AntV都是不错的图标库，感兴趣的读者可以直接到他们的官网阅读相关的资料，笔者这里不做优劣说明，主要针对vue-echarts的一些图表方案进行讲解。 vue-echarts是基于ech...
vue 图表组件_用于制作图表的简单轻巧的Vue组件
cuk5239的博客
07-29 3195
vue 图表组件 纯Vue图表 (Pure Vue Chart) A simple and lightweight vue component for making charts that do not rely on large chart libraries and will not bloat your dependencies. 一个简单而轻巧的vue组件，用于制作不依赖大型图表库且不会...
轻量级图形报表工具JSCharts (JSChart)，内置函数中文参考
weixin_34090643的博客
10-11 192
　　JSChart是一个轻量级的在线图表生成工具，本身十分小巧，简单易用，相对来讲功能也不是特别强大，但是对于一些要求不高的应用来讲已经够用了。 　　这个框架本身对中文支持不是很好，手册什么的都是英文的。 JSChart内置函数参考 colorizeBars(array colordata)设置柱状图各矩形颜色。colorizePie(array colordata)设置饼图各块颜色。dra...
vue3 + ts svg-sprite-loader
08-09
Vue3是Vue.js的下一个主要版本，它是一个用于构建用户界面的渐进式框架。Vue3相比于先前版本，拥有更高的性能和更好的开发体验。 TypeScript是JavaScript的超集，它添加了静态类型检查和其他一些高级特性，使我们在项目开发中更加可靠和舒适。在Vue3中，TypeScript得到了更好的支持，可以很方便地使用TypeScript进行开发。 SVG-sprite-loader是一个Webpack的插件，它可以将多个独立的SVG文件合并成一个SVG Sprite图像，这样可以更有效地使用SVG图像并减少网络请求。这个插件在Vue3中也可以使用，并结合Vue的模板语法方便地使用合并后的SVG Sprite图像。 使用Vue3和TypeScript可以带来更好的开发体验，开发者可以通过类型检查捕获潜在的错误，并有更好的代码补全和提示，提高开发效率和代码质量。而SVG-sprite-loader则可以优化SVG图像的加载，减少网络请求，提高页面性能。 在开发过程中，可以使用Vue3的脚手架工具创建一个基于Vue3和TypeScript的项目，然后在项目中使用SVG-sprite-loader插件来合并SVG图像。可以通过配置Webpack的loader来实现SVG合并的功能，然后在Vue组件中使用合并后的SVG Sprite图像。 总之，使用Vue3、TypeScript和SVG-sprite-loader插件可以提升项目开发的效率和性能，使开发者能够更轻松地构建出高质量的用户界面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值