Ant Design URL Shortener 教程

2024-08-07 18:17:16作者：翟江哲Frasier

1. 项目目录结构及介绍

在 u.ant.design 项目中，你可能会发现以下主要目录结构：

├── public             # 静态资源目录，通常包括 favicon 和 CNAME 文件
├── src                # 应用源代码目录
│   ├── App.tsx        # 应用主入口文件
│   ├── index.tsx      # 入口点文件，加载应用
│   └── services       # 服务端逻辑，如 API 调用
└── package.json       # 项目依赖和脚本配置
└── tsconfig.json      # TypeScript 编译配置
└── ...                # 其他相关配置文件

public: 存放应用程序的静态资源，例如 HTML 模板、favicon 图标等。
src: 包含所有源代码文件，其中 App.tsx 是应用的主要组件，而 index.tsx 是应用程序的起点。
services: 该目录下存放的是与后台交互的服务函数，比如API请求。
package.json: 定义了项目的依赖包和运行时的脚本命令。
tsconfig.json: TypeScript 的配置文件，用于设置编译选项。

2. 项目的启动文件介绍

`src/index.tsx`

这是项目的主要入口文件，它导入 App 组件并渲染到页面上。通常，它也负责配置路由、全局样式和其他初始化工作。示例代码可能如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
import './index.css';

ReactDOM.render(<App />, document.getElementById('root'));

`public/index.html`

这个是应用的HTML模板，<script> 标签会引入打包后的 JavaScript 文件。基础模板如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>URL Shortener</title>
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>
</html>

3. 项目的配置文件介绍

package.json 文件包含了项目的元数据，例如项目的名称、版本以及开发时所需的依赖和脚本。例如：

{
  "name": "url-shortener",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "antd": "^4.x.x",
    "react": "^17.x.x",
    "react-dom": "^17.x.x",
    "typescript": "^4.x.x"
  },
  "devDependencies": {}
}

这里的 scripts 字段定义了常用的命令，如 start (启动本地开发服务器)，build (生产环境构建) 和 test (执行测试)。

tsconfig.json 文件则包含了 TypeScript 编译的设置，例如目标ES版本、允许的语法特性等。基本配置可能如下：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}