一、说明

（1）这边使用的spine版本是3.8.99

spine包含3个部分,可以将三个文件上传到cdn，三个文件放在相同的目录中

test.atlas 、 test.json 、test.png

（2）pixi.js - v7.0.4

https://github.com/pixijs/pixijs

（2）pixi-spine - v4.0.4

https://github.com/pixijs-userland/spine

如果找不到pixi-spine文件可以在工程中安装 npm i pixi-spine然后在node_modules里面找到对应的@pixi-spine包找到js文件

一、在html中引入 

<script src="/assets/js/pixi.min.js"></script>
<script src="/assets/js/pixi-spine.js"></script>

二、在组件中使用

<template>
  <div class="canvas-box">
    <canvas ref="canvasRef"></canvas>
  </div>
</template>
<script lang="ts" setup>
const canvasRef = ref();
const props = defineProps({
  json: {
    type: String,
    default: () => "",
  },
});

const showAnimate = (json: string) => {
  window.PIXI.Assets.load(json).then((resources: any) => {
    // 从骨骼数据中读取宽高
    const { width, height, animations } = resources.spineData;
    // 绑定canvas画布，设置宽高
    const app = new window.PIXI.Application({
      view: canvasRef.value, // 设置canvas节点  `#canvas`
      backgroundAlpha: 0, // 背景透明
      width: width,
      height: height,
    });
    // 创建spine动画对象并添加到画布中
    let animation = new window.PIXI.spine.Spine(resources.spineData);
    app.stage.addChild(animation);
    // 设置动画位置为画布中心
    animation.x = width / 2;
    animation.y = height / 2;
    // 循环播放动画
    animation.state.setAnimation(0, animations[0].name, true);
  });
};

showAnimate(props.json);
</script>

<style lang="scss" scoped>

</style>