# react-admin

**Repository Path**: jnfeelings/react-admin

## Basic Information

- **Project Name**: react-admin
- **Description**: react学习项目前台
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-11
- **Last Updated**: 2024-09-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 一、启动

#### 1.1 装包

```bash
pnpm install
```

#### 1.2 启动

```bash
pnpm dev
```

#### 1.3 打包

```bash
pnpm build
```

## 二、项目搭建

#### 2.1 创建项目、husky/prettier/commitLint配置

参考文章：https://juejin.cn/post/7238490244324294712#heading-12

#### 2.2 路由

#### 2.3 @根路径配置

###### 2.3.1 - vite.config.ts 中

```ts
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'
export default defineConfig({
  // ...
  resolve: {
    // 添加路径别名
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  // ...
})
```

###### 2.3.2 - vite-env.d.ts 中

```ts
/// <reference types="vite/client" />
// 配置这个文件是 解决错误：找不到模块“@/views/login/index.tsx”或其相应的类型声明。ts(2307)
// 这段代码告诉 TypeScript，所有以 .tsx 结尾的文件都是 tsx 组件，可以通过 import 语句进行导入。这样做通常可以解决无法识别模块的问题。
declare module '*.tsx' {
  import { Component } from 'tsx'
  const component: Component
  export default component
}
```

###### 2.3.2 使用

```tsx
// 图片-文件
import Image1 from '@/assets/login/image.png'

// tsx-文件
import Home from '@/pages/teacher/Home/index.tsx'
```

#### 2.4 svg 组件封装

参考文章：https://blog.csdn.net/m0_67156290/article/details/136061914

使用示例：
```bash
<SvgIcon name='login-icon' size='600'/>
```

## 九、代码示例

#### 9.1 css样式写法

```js
import styles from './index.module.scss'

function App() {
  return (
    <div className={`${styles.container} ${styles.font} ${styles['login-container']} `}>
      <div className='flex items-center justify-between'>
        <div className='left-box'>左侧</div>
        <div className='right-box'>右侧</div>
      </div>
    </div>
  )
}
export default App
```