Ink Kit 开源项目教程

Ink Kit 开源项目教程

ink-kit Onchain-focused SDK with ready-to-use templates, themes, and magical animated components ✨ 项目地址: https://gitcode.com/gh_mirrors/in/ink-kit

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

Ink Kit 是一个面向区块链开发的 SDK，提供了易于使用的应用布局模板、主题和动画组件。以下是项目的目录结构及其简要介绍：

• .github/: 存放 GitHub 的一些配置文件，如工作流和模板。
• .storybook/: Storybook 的配置和故事文件，用于展示组件。
• .vscode/: Visual Studio Code 的项目配置。
• scripts/: 构建和开发脚本。
• src/: 源代码目录，包含所有组件和样式。
• dockerignore: Docker 构建时排除的文件列表。
• .gitignore: Git 忽略文件列表。
• .prettierrc: Prettier 代码格式化配置文件。
• Dockerfile: Docker 容器构建文件。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文件。
• amplify.yml: Amplify 配置文件。
• eslint.config.mjs: ESLint 配置文件。
• package.json: Node.js 项目配置文件。
• pnpm-lock.yaml: pnpm 锁文件。
• tsconfig.json: TypeScript 配置文件。
• vite.config.mts: Vite 配置文件。

2. 项目的启动文件介绍

在 src/ 目录下，通常会有一个名为 index.ts 或 App.tsx 的文件，这是应用的入口文件。以下是启动文件的基本结构：

import { Button } from '@inkonchain/ink-kit';
import './style.css';

function App() {
  return (
    <div>
      <Button size="md" variant="secondary">Ship It</Button>
    </div>
  );
}

export default App;

在这个文件中，你通常会导入 Ink Kit 的组件，并定义应用的组件结构。然后，你可以在一个 HTML 文件中引用这个入口文件，以启动应用。

3. 项目的配置文件介绍

以下是项目中几个重要配置文件的简要介绍：

• tsconfig.json: TypeScript 配置文件，定义了项目的 TypeScript 编译选项。

• package.json: 定义了项目的依赖、脚本和元数据。以下是一些常用的配置：

  {
    "name": "@inkonchain/ink-kit",
    "version": "1.0.0",
    "description": "Onchain-focused SDK with ready-to-use templates, themes, and magical animated components",
    "main": "dist/index.js",
    "scripts": {
      "start": "vite",
      "build": "tsc && vite build",
      "serve": "vite preview"
    },
    "dependencies": {
      // 项目的依赖
    },
    "devDependencies": {
      // 开发依赖
    }
  }
  

• vite.config.mts: Vite 配置文件，用于配置 Vite 的构建和开发服务器选项。

  import { defineConfig } from 'vite';
  
  export default defineConfig({
    // Vite 配置
  });
  

通过这些配置文件，开发者可以自定义项目的行为，包括编译过程、开发服务器和打包输出等。

ink-kit Onchain-focused SDK with ready-to-use templates, themes, and magical animated components ✨ 项目地址: https://gitcode.com/gh_mirrors/in/ink-kit