# react-question-vite

**Repository Path**: qing-icon/react-question-vite

## Basic Information

- **Project Name**: react-question-vite
- **Description**: react + react router v6 + scss + vite
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2023-03-29
- **Last Updated**: 2024-12-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 创建React应用程序入门

## 1.新建工程
### 1.1 项目是由 **npm create vite@latest** 脚手架搭建 
[英文官网地址](https://vitejs.dev/)
[中文官网地址](https://cn.vitejs.dev/guide/)

### 1.2 进入项目  **cd my-app** 

### 1.3 下载相关依赖 **yarn** or **npm install**

### 1.4 运行项目  **`yarn start`** 或 `npm start`

## 2. 安装插件

### 2.1.1 [安装scss方法](https://create-react-app.dev/docs/adding-a-sass-stylesheet)
[中文地址](https://create-react-app.bootcss.com/docs/adding-a-sass-stylesheet)

npm install sass
**or**
yarn add sass

### 2.2 Adding a Router 添加路由
[React Router 官网地址](https://reactrouter.com/en/main)

Create React App没有规定具体的路由解决方案，但React Router是最受欢迎的解决方案。

要添加它，请运行：
```
npm install --save react-router-dom
```
or
```
yarn add react-router-dom
```
## 3.引入UI组件
### 3.1 安装antd UI 

```
yarn add antd
```
### 3.2 引入layout布局
详情查看 views/layout/index.jsx 页面

### 3.3 proxy 代理
[官方地址](https://cn.vitejs.dev/config/server-options.html)
```
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://114.215.183.171:5002',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '/api'),
      },
    }
  },
})

```

### 3.4 判断是否登录  

因为除了接口之外都要在请求是带上 请求头 `authorization` 字段  
```
request.js 页面
// request拦截器 请求拦截器
appRequest.interceptors.request.use(config => {
    config.headers['authorization'] = localStorage.getItem('token')
    if (config.url.indexOf('?') === -1) {
        config.url = config.url + '?_t=' + Date.parse(new Date()) / 1000
    } else {
        config.url = config.url + '&_t=' + Date.parse(new Date()) / 1000
    }
    return config
}, error => {
    Promise.reject(error)
});
```
所以在router/index.jsx 页面判断 token是否被储存到 localStorage 即可  

```
  const isLogin = localStorage.getItem("token") ? true : false;
  if (!isLogin && pathname !== "/login") navigate("/login"); //判断当没有token时相当于没登录
```
### 3.5 模拟vue slot 插槽

详情查看 /components/conditionView/conditionView 页面