Vue3 Composition API导入第三方库组件失效问题求助

针对你遇到的“未使用的变量”提示以及组件无法正常渲染的问题，可按以下步骤处理：

1. 解决“未使用变量”提示并关联组件标签 #

在 Vue3 的 <script setup> 中，ESLint 无法自动关联大驼峰导入名 TradingVue 和模板中的短横线标签 <trading-vue>，因此会触发“未使用变量”提示。你可以通过显式赋值的方式让 ESLint 识别组件的使用：

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import TradingVue from "trading-vue-js";

// 将导入的组件赋值为小驼峰变量，与模板标签的短横线命名对应
const tradingVue = TradingVue;

// 你的原有代码逻辑
type Stream = { market: string; timeframe: string };
let state = reactive({
  streams: <Stream[]>[],
  data: {
    ohlcv: [
      [1551128400000, 33, 37.1, 14, 14, 196],
      [1551132000000, 13.7, 30, 6.6, 30, 206],
      [1551135600000, 29.9, 33, 21.3, 21.8, 74],
      [1551139200000, 21.7, 25.9, 18, 24, 140],
      [1551142800000, 24.1, 24.1, 24, 24.1, 29],
    ],
  },
});

async function getOHLCV() {
  const response = await (
    await fetch(
      "http://localhost:3000/stream/ohlcv/" +
        state.streams[0].market +
        "/" +
        state.streams[0].timeframe
    )
  ).json();
}
onMounted(async function () {
  const response = await (await fetch("http://localhost:3000/stream")).json();
  state.streams = response;
  await getOHLCV();
});
</script>

<template>
  <trading-vue :data="state.data"></trading-vue>
</template>

2. 适配 Vue2 组件兼容性 #

由于 trading-vue-js 是为 Vue2 开发的库，若上述方法仍无法正常渲染，可通过手动注册组件的方式兼容：

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import TradingVue from "trading-vue-js";

// 手动映射组件与标签名
const tradingVueComponent = TradingVue;

// 原有代码逻辑不变
</script>

<template>
  <component :is="tradingVueComponent" :data="state.data"></component>
</template>

3. 修正数据传递格式（额外提示） #

trading-vue-js 要求 data 属性是包含 ohlcv 字段的对象，而非直接传递数组。你原代码中直接传 state.data.ohlcv 不符合要求，需调整为传递 state.data（或结构为 { ohlcv: state.data.ohlcv }）。

内容的提问来源于stack exchange，提问作者BitQueen