Hime Display 开源项目安装与使用教程

Hime Display 开源项目安装与使用教程

hime-display A universal desktop model displayer for Live2D, Spine, MMD and VRoid. 项目地址: https://gitcode.com/gh_mirrors/hi/hime-display

1. 项目目录结构及介绍

Hime Display项目的目录结构如下：

hime-display/
├── images/                # 项目相关图片资源
├── public/                # 公共文件目录
├── scripts/               # 脚本文件目录
├── src/                   # 源代码目录
│   ├── eslintrc.js        # ESLint配置文件
│   ├── gitignore          # Git忽略文件配置
│   ├── LICENSE            # 项目许可证文件
│   ├── README-CN.md       # 中文说明文档
│   ├── README-JP.md       # 日文说明文档
│   ├── README.md          # 英文说明文档
│   ├── build.config.js    # 构建配置文件
│   ├── package-lock.json # npm包锁定文件
│   ├── package.json      # npm包配置文件
│   └── yarn.lock          # Yarn包锁定文件
└── ...                    # 其他文件和目录

目录详细介绍

• images/: 存放项目相关的图片资源。
• public/: 存放公共文件，如HTML模板等。
• scripts/: 存放项目运行和构建所需的脚本文件。
• src/: 存放项目的源代码。
  • eslintrc.js: ESLint配置文件，用于代码风格和语法检查。
  • gitignore: Git忽略文件配置，指定哪些文件和目录不被Git跟踪。
  • LICENSE: 项目许可证文件，说明项目的开源协议。
  • README-CN.md: 中文说明文档，介绍项目的使用方法和相关配置。
  • README-JP.md: 日文说明文档，介绍项目的使用方法和相关配置。
  • README.md: 英文说明文档，介绍项目的使用方法和相关配置。
  • build.config.js: 构建配置文件，用于配置项目的构建参数。
  • package-lock.json: npm包锁定文件，确保项目依赖的一致性。
  • package.json: npm包配置文件，定义项目的依赖和脚本等。
  • yarn.lock: Yarn包锁定文件，确保项目依赖的一致性。

2. 项目启动文件介绍

项目的启动文件主要是package.json中的scripts部分，以下是相关脚本介绍：

"scripts": {
  "start": "yarn run start",    // 启动项目
  "build": "yarn run build"     // 构建项目
}

脚本详细介绍

• start: 用于启动项目，执行yarn start后会启动开发服务器，便于调试和开发。
• build: 用于构建项目，执行yarn build后会生成可发布的文件，通常用于生产环境。

3. 项目配置文件介绍

项目的配置文件主要包括package.json和build.config.js。

package.json

package.json是项目的核心配置文件，定义了项目的依赖、脚本、版本等信息。以下是主要部分介绍：

{
  "name": "hime-display",         // 项目名称
  "version": "1.1.0",             // 项目版本
  "main": "index.js",             // 项目入口文件
  "scripts": {                    // 项目脚本
    "start": "yarn run start",
    "build": "yarn run build"
  },
  "dependencies": {               // 项目依赖
    "electron": "^latest",
    "vue": "^3.0.0",
    "pixi.js": "^6.0.0",
    "three.js": "^latest",
    "lowdb": "^latest",
    "i18next": "^latest",
    "element-plus": "^latest",
    "vite": "^latest",
    "kalidokit": "^latest",
    "mediapipe": "^latest"
  },
  "devDependencies": {            // 开发依赖
    "eslint": "^latest",
    "prettier": "^latest"
  }
}

build.config.js

build.config.js是项目的构建配置文件，用于配置项目的构建参数。以下是主要部分介绍：

module.exports = {
  appId: "hime.display",          // 应用ID
  productName: "Hime Display",    // 应用名称
  directories: {
    output: "dist"                // 输出目录
  },
  files: [
    "src/**/*",
    "public/**/*"
  ],
  extraResources: [
    "images/**/*"
  ],
  win: {
    target: "nsis"                // Windows构建目标
  },
  mac: {
    target: "dmg"                 // macOS构建目标
  }
};

通过以上

hime-display A universal desktop model displayer for Live2D, Spine, MMD and VRoid. 项目地址: https://gitcode.com/gh_mirrors/hi/hime-display