---

---

项目地址

• 教程作者：
• 教程地址：

• 代码仓库地址：

• 所用到的框架和插件：

dbt 
airflow

一、使用Yarn安装所有环境

1. 使用yarn 创建vite 项目

yarn create vite

2. 提示行里创建 react js 项目
3. 进入到刚创建的react里，并且安装tailwindcss

 yarn add -D tailwindcss postcss autoprefixer

4. 创建tailwindcss的配置文件

npx tailwindcss init -p

5. 在tailwind.config.js配置

/** @type {import('tailwindcss').Config} */
export default {content: ["./src/**/*.{js,jsx}"],theme: {extend: {},},plugins: [],
};

6. 在src/index.css引入tailwindcss

@tailwind base;
@tailwind components;
@tailwind utilities;

7. 在src/App.jsx测试安装是否成功

import React from "react";export default function App() {return (<div><h1 class="text-3xl font-bold underline">Hello world!</h1></div>);
}

8. 安装项目所需要的所有依赖

yarn add apexcharts react-apexcharts axios jwt-decode moment
yarn add react-hot-toast react-icons @reduxjs/toolkit react-redux
yarn add react-spinners react-window redux-thunk socket.io-client

二、文件结构以及路由配置

三、登录和注册

3.1 注册页面

3.1.1 静态页面

• 布局要领：
  1. 先把所有需要提示的文字以及内容全部写出来
  2. Form表单内部使用flex-col进行垂直分布
  3. 所有使用到圆角的地方加over-flow-hidden
  4. Or是一个样式，可以复用

3.1.2 表单提交useSate

• 主要内容：
  1. 表单value的获取和存储，使用useState完成
  2. 输入框的value获取，使用自定义的inputHandle完成
  3. 表单提交，需要阻止刷新
  4. value={state.email}获取的是表单里的name="email" 的值，需要对应起来

            <div className="flex flex-col w-full gap-1 mb-3"><label htmlFor="email">Email</label><inputclassName="px-3 py-2 outline-none border border-slate-400 bg-transparent rounded-md"type="text"name