Vue-Live2D 技术文档

Vue-Live2D 技术文档

Vue-Live2D 是一款专为 Vue.js 设计的看板娘插件，允许开发者轻松地将可爱的虚拟人物集成到他们的Vue项目中。本文档将指导您完成从安装到高级配置的所有步骤，确保您可以充分利用此插件的功能。

一、安装指南

npm 安装

要将 Vue-Live2D 添加到您的Vue项目，使用npm是最简便的方式：

npm install vue-live2d

安装完成后，在您的Vue项目中导入并注册组件：

import vueLive2d from 'vue-live2d'

// 在Vue的main.js中全局注册
Vue.use(vueLive2d)

或者在单个组件内局部使用：

import { vueLive2d } from 'vue-live2d'

export default {
  components: {
    vueLive2d
  }
}

本地部署

如果您希望克隆仓库进行本地开发或测试，按照以下步骤操作：

1. 克隆项目：

git clone https://github.com/evgo2017/vue-live2d.git

2. 进入项目目录：

cd vue-live2d

3. 安装依赖：

npm install

4. 运行本地服务器：

npm run serve

之后，您可以在浏览器中访问localhost来预览项目。

二、项目使用说明

引用示例

在Vue组件中使用Vue-Live2D，您可以通过如下方式：

<template>
  <vue-live2d :api-path="apiPath" :model="defaultModel" />
</template>

<script>
export default {
  data() {
    return {
      apiPath: "https://evgo2017.com/api/live2d-static-api/indexes",
      defaultModel: ["Potion-Maker/Pio", "school-2017-costume-yello"]
    };
  }
};
</script>

示例网页

• 在线演示：evgo2017.com/repo/vue-live2d
• GitHub Pages 示例：evgo2017.github.io/vue-live2d/page/index.html

三、项目API使用文档

Vue-Live2D提供了灵活的配置选项以适应不同的需求。以下是主要配置参数：

| 参数 | 描述 | 类型 | 默认值 | | ---------- | -------------------------------------- | --------- | --------------- | | size | 模型的宽度和高度，等比缩放 | Number | 255 | | width | 模型宽度 | Number | 0（由size覆盖） | | height | 模型高度 | Number | 0（由size覆盖） | | apiPath | 加载模型数据的API地址 | String | 见默认值 | | model | 默认显示的模型及其皮肤编号 | Array | 见默认值 | | direction | 模型展示方位：left 或 right | String | left | | tipPosition | 提示消息的位置：top 或 bottom | String | top | | tips | 触发特定事件时模型的回应话语 | Object | 详阅tips.js | | homePage | 单击模型时跳转的首页链接 | String | 项目GitHub页 | | customId | 自定义Canvas元素的id | String | vue-live2d-main |

四、项目安装方式

项目安装除了上述npm方式外，对于不使用npm管理的项目，理论上也可以通过下载发布版本的压缩文件，并手动引入相关JavaScript和CSS文件至项目中，但这种方式官方没有详细教程且可能缺乏维护更新的支持，推荐使用npm或Git方式进行更现代和便利的开发流程。

---

以上即为Vue-Live2D的基本技术和配置文档。通过遵循这些指导，您能够顺利集成这个增强用户体验的可爱特性到您的Vue应用程序中。