Vacuum Card 项目教程
1. 项目的目录结构及介绍
vacuum-card/
├── .github/
│ └── workflows/
├── src/
│ ├── components/
│ ├── locales/
│ ├── styles/
│ ├── utils/
│ ├── index.ts
│ └── vacuum-card.ts
├── public/
│ └── index.html
├── .gitignore
├── package.json
├── tsconfig.json
└── README.md
- .github/workflows/: 包含 GitHub Actions 的工作流配置文件。
- src/: 项目的源代码目录。
- components/: 存放项目的 React 组件。
- locales/: 存放多语言支持的翻译文件。
- styles/: 存放项目的样式文件。
- utils/: 存放工具函数和辅助代码。
- index.ts: 项目的入口文件。
- vacuum-card.ts: 主要功能实现文件。
- public/: 存放静态资源文件,如 HTML 文件。
- .gitignore: 指定 Git 忽略的文件和目录。
- package.json: 项目的依赖和脚本配置文件。
- tsconfig.json: TypeScript 配置文件。
- README.md: 项目的说明文档。
2. 项目的启动文件介绍
项目的启动文件是 src/index.ts
。该文件是整个项目的入口点,负责初始化应用并加载主要组件。以下是 index.ts
的主要内容:
import React from 'react';
import ReactDOM from 'react-dom';
import VacuumCard from './vacuum-card';
ReactDOM.render(
<React.StrictMode>
<VacuumCard />
</React.StrictMode>,
document.getElementById('root')
);
- ReactDOM.render: 将
VacuumCard
组件渲染到public/index.html
文件中的root
元素。 - React.StrictMode: 用于在开发过程中检测潜在问题。
3. 项目的配置文件介绍
package.json
package.json
文件包含了项目的依赖、脚本和其他元数据。以下是一些关键配置:
{
"name": "vacuum-card",
"version": "1.0.0",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3"
},
"devDependencies": {
"@types/react": "^17.0.3",
"@types/react-dom": "^17.0.3",
"typescript": "^4.2.3"
}
}
- scripts: 定义了项目的启动、构建、测试和弹出配置的命令。
- dependencies: 列出了项目运行时所需的依赖包。
- devDependencies: 列出了开发过程中所需的依赖包。
tsconfig.json
tsconfig.json
文件用于配置 TypeScript 编译器选项。以下是一些关键配置:
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"jsx": "react"
},
"include": ["src/**/*"]
}
- compilerOptions: 定义了 TypeScript 编译器的选项。
- target: 指定编译后的 JavaScript 版本。
- module: 指定模块系统。
- strict: 启用所有严格类型检查选项。
- jsx: 指定 JSX 语法的处理方式。
- include: 指定需要编译的文件或目录。