NeoHtop 项目使用教程

NeoHtop 项目使用教程

neohtop 💪🏻 system monitoring on steroids 项目地址: https://gitcode.com/gh_mirrors/ne/neohtop

1. 项目目录结构及介绍

NeoHtop 的目录结构如下：

neohtop/
├── .github/              # GitHub 工作流和模板文件
├── .husky/               # Husky 配置文件夹
├── .vscode/              # Visual Studio Code 配置文件
├── docs/                 # 文档文件夹
├── src-tauri/            # Tauri 后端代码
├── src/                  # Svelte 前端代码
├── static/               # 静态资源文件夹
├── .gitignore            # Git 忽略文件列表
├── .prettierrc           # Prettier 配置文件
├── LICENSE              # MIT 许可证文件
├── README.md             # 项目说明文件
├── app-icon.png          # 应用图标
├── jsconfig.json         # JavaScript 配置文件
├── package-lock.json     # 包版本锁定文件
├── package.json          # 项目包配置文件
└── vite.config.js        # Vite 配置文件

• .github/：包含 GitHub 工作流和模板，如 issue 模板等。
• .husky/：包含 Husky 配置文件，用于在提交代码前执行预提交钩子。
• .vscode/：包含 Visual Studio Code 的项目配置文件。
• docs/：包含项目的文档。
• src-tauri/：包含 Tauri 后端代码，用于构建原生应用程序。
• src/：包含 Svelte 前端代码，用于构建用户界面。
• static/：包含静态资源，如图片、CSS 文件等。
• .gitignore：指定 Git 忽略的文件和文件夹。
• .prettierrc：Prettier 配置文件，用于代码格式化。
• LICENSE：项目的 MIT 许可证文件。
• README.md：项目说明文件，包含项目信息、安装和使用说明。
• app-icon.png：应用图标文件。
• jsconfig.json：JavaScript 配置文件，用于配置编辑器。
• package-lock.json：包版本锁定文件，确保项目依赖的一致性。
• package.json：项目包配置文件，定义项目依赖和脚本。
• vite.config.js：Vite 配置文件，用于配置前端构建过程。

2. 项目的启动文件介绍

项目的启动主要依赖于 package.json 文件中的脚本。

在 package.json 文件中，有以下启动相关的脚本：

"scripts": {
  "tauri dev": "tauri dev",
  "tauri build": "tauri build",
  "format": "prettier --write 'src/**/*' 'static/**/*' '*.md' && cargo fmt",
  "format:check": "prettier --check 'src/**/*' 'static/**/*' '*.md' && cargo fmt -- --check"
}

• tauri dev：启动 Tauri 开发服务器，用于开发和测试。
• tauri build：构建项目，用于生成可发布的版本。

3. 项目的配置文件介绍

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

• .prettierrc：Prettier 配置文件，用于定义代码格式化规则。例如：

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

• vite.config.js：Vite 配置文件，用于配置前端构建过程。例如：

import { defineConfig } from 'vite';
import svelte from '@vitejs/plugin-svelte';

export default defineConfig({
  plugins: [svelte()]
});

• package.json：项目包配置文件，定义项目的依赖和构建脚本。例如：

{
  "name": "neohtop",
  "version": "1.1.2",
  "description": "A modern, cross-platform system monitor built on top of Svelte, Rust, and Tauri.",
  "main": "src-tauri/target/release/tauri.js",
  "scripts": {
    "tauri dev": "tauri dev",
    "tauri build": "tauri build",
    // ...
  },
  "dependencies": {
    // ...
  },
  "devDependencies": {
    // ...
  }
}

通过以上配置文件，项目可以保持一致的代码风格，并按照预定的规则进行构建和打包。

neohtop 💪🏻 system monitoring on steroids 项目地址: https://gitcode.com/gh_mirrors/ne/neohtop