React-admin

前言

之前在工作一直使用的是vue开发，先公司项目启用react，由于不熟悉，所以利用业余时间学习。希望我能坚持到把整个项目完成然后上线的外网。项目基本结构搭建号之后发布。在这里记录下。

依赖模块

项目是用npm init vite 创建的，选择的是javascript开发。

现阶段所依赖的模块

• react

• react-dom

• react-router-dom（react路由为^6.28.0版本）

• antd（蚂蚁金服开源的 react ui 组件框架）

• axios（http 请求模块，可用于前端任何场景，很强大 👍）

• ......（后续模块。等用到了再列出）

项目搭建

• 本模板采用React+Vite+antd+js搭建，并配置了eslint+prettier统一代码风格和规范，封装了完整的请求函数，并对权限（路由，菜单，组件）加以控制，提供深色模式和浅色模式两种方案。

• npm init vite@latest 选择javascript+swc

• npm i

• npm run dev 运行初始项目

配置项目的eslint+prettier

配置eslint

• npm i eslint

• 安装ESLint和React插件（如果还没安装过的话）

• npm install eslint eslint-plugin-react --save-dev

• 在根目录创建.eslintrc.js文件，并配置ESLint

import js from '@eslint/js'
import globals from 'globals'
import react from 'eslint-plugin-react'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
​
export default [
  { ignores: ['dist'] },
  {
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },
    },
    settings: { react: { version: '18.3' } },
    plugins: {
      react,
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...js.configs.recommended.rules,
      ...react.configs.recommended.rules,
      ...react.configs['jsx-runtime'].rules,
      ...reactHooks.configs.recommended.rules,
      'react/jsx-no-target-blank': 'off',
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  },
]

​

配置prettier

• npm i prettier -D

• 在项目根目录下创建.prettierrc文件

{
    "extends": ["taro/react","plugin:prettier/recommended"],
    "plugins": ["prettier"],
    "rules": {
      "prefer-const":"warn",
      "react/jsx-uses-react": "off",
      "react/react-in-jsx-scope": "off",
      "quotes":"off",
      "no-unused-vars":"off",
      "array-bracket-spacing":["error","never"],
      "no-var":"warn",
      "comma-spacing": [
        "error",
        {
          "before": false,
          "after": true
        }
      ],
      "no-cjs": "off",
      "@typescript-eslint/no-unused-vars": "warn",
      "no-commonjs": "off",
      "import/no-commonjs": "off",
      "@typescript-eslint/no-explicit-any": "off"
    }
  }

代码目录

+-- node_modules/                           ---npm下载文件目录
+-- public/
|   --- vite.svg                            ---url中的logo
+-- src/                                    ---核心代码目录
|   +-- assets                              ---各式各样的组件存放目录
|   |    |    --- ...
|   +-- components                          ---各式各样的组件存放目录
|   |    |    --- ...
|   +-- router                              ---路由组件
|   |    |    --- ...
|   +-- untils                              ---各式各样的自定义函数
|   +-- views                               ---页面存放
|   +-- index.css                           ---全局自定义css
|   +-- main.jsx                            ---入口文件
--- .eslintrc                               ---自定义eslint配置文件
--- .gitignore                              ---自定义push忽略文件
--- .prettierrc                             ---自定义prettierrc配置文件
--- index.html                              ---单页面应用index主页面
--- package.json                            ---项目信息
--- README.md                               ---说明文件
--- vite.config.js                          ---配置文件

此时npm run dev 运行项目会得到初始页面

后续

• 接下来会引入antd UI组件进行页面布局

• 在router文件夹中创建路由

• 使用axios进行二次封装，对请求/响应进行拦截

• .......