# vite-react18-cms

**Repository Path**: yuyingqianduan/vite-react18-cms

## Basic Information

- **Project Name**: vite-react18-cms
- **Description**: react18+vite5+ts+cms通用管理系统模板
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-08-31
- **Last Updated**: 2024-10-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React18 + TypeScript + Vite

- [react](https://react.docschina.org/)
- [prettier](https://www.prettier.cn/)
- [eslint](https://eslint.nodejs.cn/)
- [vite](https://cn.vitejs.dev/)
- [typescript](https://www.typescriptlang.org/)
- [redux](https://redux.js.org/)
- [antd](https://ant-design.antgroup.com/index-cn)

## 介绍

react18 + vite5 + ts + redux + antd 通用 h5 移动端项目架子

## 软件架构

使用前端最新技术搭建的通用 h5 移动端项目架子，包含 react18 + vite5 + ts + redux + antd 等技术栈

## 安装教程

1.  pnpm intall 安装依赖包
2.  pnpm run dev 启动项目
3.  pnpm run build 打包项目

## eslint 安装

执行下面命令自动初始化配置文件 根目录自动生成（没有的需要手动创建） `eslint.config.js` 文件，并且根目录创建 `.eslintignore` 文件

```shell
npm init @eslint/config@latest
```

## prettier 安装

执行下面命令自动初始化配置文件 根目录创建 `.prettierrc.mjs` 文件，并且根目录创建 `.prettierignore` 文件

```shell
pnpm i prettier -D
```

## 路由安装
```shell
pnpm add react-router-dom
```

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js
export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});
```

- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:

```js
// eslint.config.js
import react from "eslint-plugin-react";

export default tseslint.config({
  // Set the react version
  settings: { react: { version: "18.3" } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs["jsx-runtime"].rules,
  },
});
```

## 特技

1.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
2.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
3.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
4.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
5.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)