ui-color 项目使用教程

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

ui-color/
├── src/
│   ├── pages/
│   │   └── index.js
│   └── static/
├── .gitignore
├── .nvmrc
├── .prettierrc
├── LICENSE.md
├── README.md
├── gatsby-config.js
├── package.json
├── tsconfig.json
└── yarn.lock

目录结构介绍

• src/: 项目的源代码目录，包含页面和静态资源。
  • pages/: 存放项目的页面文件，index.js 是主页的入口文件。
  • static/: 存放静态资源文件。
• .gitignore: Git 忽略文件，指定哪些文件或目录不需要被 Git 管理。
• .nvmrc: 指定 Node.js 版本。
• .prettierrc: Prettier 配置文件，用于代码格式化。
• LICENSE.md: 项目的开源许可证文件，本项目使用 MIT 许可证。
• README.md: 项目的说明文档。
• gatsby-config.js: Gatsby 配置文件，用于配置项目的构建和插件。
• package.json: 项目的依赖管理文件，包含项目的依赖包和脚本命令。
• tsconfig.json: TypeScript 配置文件，用于配置 TypeScript 编译选项。
• yarn.lock: Yarn 锁定文件，用于确保依赖包的版本一致性。

2. 项目的启动文件介绍

启动文件

• src/pages/index.js: 这是项目的入口文件，负责渲染主页内容。你可以通过编辑这个文件来修改主页的显示内容。

启动命令

在项目根目录下运行以下命令启动开发服务器：

yarn start

启动后，打开浏览器访问 http://localhost:8000 即可查看项目运行效果。

3. 项目的配置文件介绍

配置文件

• gatsby-config.js: 这是 Gatsby 的主要配置文件，用于配置项目的构建和插件。你可以在这里添加或修改插件、配置网站的元数据等。

module.exports = {
  siteMetadata: {
    title: `ui-color`,
    description: `Converting HEX & RGB colors to UIColor for both Objective C & Swift`,
    author: `@manosim`,
  },
  plugins: [
    // 插件配置
  ],
};

• package.json: 这是项目的依赖管理文件，包含项目的依赖包和脚本命令。你可以在这里添加或修改项目的依赖包，或者定义新的脚本命令。

{
  "name": "ui-color",
  "version": "1.0.0",
  "scripts": {
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve"
  },
  "dependencies": {
    "gatsby": "^4.0.0",
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  }
}

• tsconfig.json: 这是 TypeScript 的配置文件，用于配置 TypeScript 编译选项。你可以在这里设置 TypeScript 的编译目标、模块系统等。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

通过以上配置文件，你可以自定义项目的构建和运行环境，以满足不同的开发需求。