【亲测免费】 Live2D Viewer Web 使用教程

Live2D Viewer Web 使用教程

本教程基于 guansss/live2d-viewer-web，旨在指导您了解并运行这个用于在网页上展示Live2D模型的开源项目。

1. 项目的目录结构及介绍

live2d-viewer-web 的项目结构清晰，便于理解：

• public: 包含静态资源，如 index.html 入口页面以及必要的库文件如 live2dcubismcore_min.js。

• scripts: 存放脚本，包括下载和解析模型所需的脚本。例如，download.js 负责从指定的源仓库下载模型文件列表，而 parse.js 处理这些下载的信息。

• src: 主要的源代码目录。

  • main.ts: 应用的入口点，负责启动整个应用。
  • app.vue: 主Vue组件，可能包含UI界面的构建。
  • 其它.ts和.vue文件：实现具体功能的组件或逻辑。

• gitignore: 指定了不应被Git版本控制的文件或目录。

• LICENSE: 许可证文件，说明了项目遵循MIT许可协议。

• README.md: 项目简介和快速入门指南。

• package.json, tsconfig.json, vue.config.js, yarn.lock: 分别是项目依赖管理、TypeScript编译配置、Vue配置文件和Yarn依赖锁定文件。

2. 项目的启动文件介绍

项目的启动核心在于 src/main.ts 文件。作为Vue应用的入口点，它初始化应用，并挂载到DOM元素上。通过引入Vue和相关的配置，main.ts 确保应用能够正确地启动并显示Live2D模型。在启动之前，确保所有依赖已通过 yarn install 安装完成，之后通过命令行执行 yarn serve 来启动开发服务器。

3. 项目的配置文件介绍

package.json

此文件定义了项目的元数据、脚本命令和依赖关系。您可以通过运行 yarn start, yarn serve, 或其他自定义脚本来启动或构建项目，这些命令都是在此文件中定义的。

tsconfig.json

TypeScript配置文件，指示编译器如何处理TypeScript源码。设置包含了目标JavaScript版本、模块系统、源代码目录等，确保TypeScript代码能正确编译到JavaScript。

vue.config.js

特定于Vue CLI的配置文件，允许您覆盖默认的Vue CLI行为，比如调整公共路径(publicPath)、配置Webpack插件等。这对于部署路径调整或是更精细的webpack配置非常有用。

scripts/const.js

虽然这不是标准的配置文件，但在项目上下文中，它扮演着配置角色，尤其是当涉及到改变模型来源或调整某些内部常量时。修改这里的值可以影响模型的获取和加载过程。

通过以上步骤和对关键文件的介绍，您可以顺利地搭建并开始使用live2d-viewer-web项目，探索Live2D模型在Web端的应用潜力。