Vue-live2d在项目中展示Live2D 模型

使用 Vue-live2d 在您的 Vue 项目中展示可爱的 Live2D 模型

Live2D 技术可以为网页增添一些趣味性，而 Vue-live2d 是一个基于 Live2D 技术的 Vue 组件，可以帮助我们在 Vue 项目中展示可爱的 Live2D 模型。在本文中，我们将介绍如何安装、配置和使用 Vue-live2d，并展示一些示例代码。
参考：https://www.npmjs.com/package/vue-live2d

1. 安装和配置

首先，我们需要安装 Vue-live2d。在命令行中执行以下命令：

npm install vue-live2d

然后，在 Vue 项目中引入 Vue-live2d 组件：

// 在需要使用 Live2D 的组件中引入
import vueLive2d from 'vue-live2d'

// 注册 Vue-live2d 组件
export default {
  components: {
    vueLive2d
  }
}

2. 使用方法

现在，我们可以在 Vue 组件中使用 Vue-live2d 组件来展示 Live2D 模型。在模板中添加以下代码：

<template>
  <div>
      <vueLive2d
        :width="config.display.width"
        :height="config.display.height"
        :model="config.model.model"
        :apiPath="config.model.pluginRootPath"
      />
  </div>
</template>

<script>
export default {
  data() {
    return {
    var config = {
        model: {
          pluginRootPath: "https://yjy.yiyiny.com/static/live2dw", //人物文件夹的位置
          pluginJsPath: "lib/",
          pluginModelPath: "live2d-widget-model-shizuku/assets/",
          jsonPath: "", // xxx.model.json 的路径
          model: ["live2d-widget-model-" + name + "/assets",name + ".model",];
        },
        display: {
          position: "right", //看板娘的表现位置left
          width: 200, //小萝莉的宽度
          height: 250, //小萝莉的高度
          hOffset: 20,
          vOffset: 20,
        },
       
    }
  }
}
</script>