安装必要工具

确保已安装Node.js（建议LTS版本）和Git。Node.js安装后会自带npm。

访问Node.js官网下载安装包。安装后，在终端/命令行输入 `node -v` 和 `npm -v` 验证是否成功。

克隆或下载项目代码

在终端中，使用 `git clone https://github.com/Jelosus2/BD2-L2D-Viewer.git` 命令克隆项目，或直接在GitHub页面下载ZIP包并解压。

如果网络不佳，可以尝试使用代理或直接下载ZIP。

安装项目依赖

进入项目根目录（`cd BD2-L2D-Viewer`），运行 `npm install` 命令。

此命令会根据 `package.json` 文件安装所有必要的库。如果遇到网络问题，可以尝试更换npm镜像源。

启动开发服务器

在项目目录下运行 `npm run dev` 或 `npm start`（具体命令请查看 `package.json` 中的 `scripts` 部分）。

启动成功后，终端通常会显示本地访问地址（如 `http://localhost:8080`）。在浏览器中打开该地址即可看到应用。

熟悉项目目录结构

用代码编辑器（如VS Code）打开项目，浏览主要文件夹（如 `src`、`public`）和关键文件（如 `package.json`, `vite.config.js` 或 `vue.config.js`）。

重点关注 `src` 目录下的 `App.vue` 和 `components` 文件夹，这是Vue应用的核心。

体验应用功能

在浏览器中操作应用，尝试选择不同角色，观察Live2D动画效果。

留意应用的状态栏或控制台，查看是否有加载信息或错误提示。

分析入口文件与主组件

阅读 `main.js`（或 `main.ts`）和 `App.vue`，理解Vue实例如何被创建、挂载，以及根组件的结构。

Vue3的项目通常使用 `createApp`，而Vue2使用 `new Vue`。查看 `package.json` 中的 `vue` 版本。

研究核心组件

在 `components` 文件夹中，找到负责展示Live2D角色的组件。阅读其模板（`<template>`）、逻辑（`<script>`）和样式（`<style>`）。

关注组件如何接收数据（props）、管理自身状态（data/ref）、以及如何调用Live2D相关的库或API。

了解资源管理

查看 `public` 或 `src/assets` 目录，了解Live2D模型文件（通常是 `.moc`, `.json`, `.textures` 等）是如何存放和被引用的。

注意静态资源（如图片、模型文件）在Vue项目中的引用路径规则。

追踪数据流与API调用

如果应用需要从网络获取角色列表或模型数据，找到相关的API请求代码（可能在 `api` 文件夹或组件的生命周期钩子中）。

使用浏览器开发者工具的“网络”（Network）标签页，观察应用运行时发出了哪些请求。

进行简单修改

尝试修改页面标题、按钮文字、背景颜色等非核心内容，观察浏览器是否热更新。

Vue的开发服务器通常支持热模块替换（HMR），修改代码后浏览器会自动刷新部分页面。

尝试添加功能

挑战一个简单功能，例如：在页面上添加一个显示当前选中角色名称的文本区域。

从修改现有组件开始，尝试绑定一个新的数据属性到模板中。

学习调试

使用 `console.log()` 在关键逻辑处输出信息，或使用Vue Devtools浏览器扩展来检查组件树和状态。

Vue Devtools是学习Vue项目不可或缺的调试工具，务必安装。