【亲测免费】 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端的应用潜力。
