react搭建后台管理系统(上篇)

创建项目

npm init vite

复制依赖

dependencies: {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-redux": "^7.2.8",
  "react-router-dom": "^6.3.0",
  "redux": "^4.1.2"
}

样式初始化

可以安装css库来进行样式的初始化，有reset-css、normalize.css,这里安装reset-css

npm i reset-css
// 在main.tsx中引入
// 初始化样式放在最前面
import 'reset-css'
// UI组件库的样式
// 自定义组件自身的样式
import App from './App'

路径别名配置

在vite.config.ts中配置@符号

import path from 'path'
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, './src')
    }
  }
})

path是node的内置模块，安装好node就安装好了path，如果此时path爆红，是因为缺少ts的一些声明，所以安装ts的这些声明即可

npm i -D @types/node

安装成功后就不爆红了，如果import 后面的path爆红就把引入改成

import * as path from 'path'

这个和vite的版本有关系

路径别名提示

在tsconfig.json文件中配置如下信息

"compilerOptions": {
  ...
  "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
}

react 样式模块化

样式模块化的方法有很多这里记录一下module.css的方法

• 首先需要将样式文件后缀修改为 .module.css 我项目中使用的是scss因此样式文件命名为xxx.module.scss
• 在组件中引入相应的样式文件

import styles from './comp1.module.scss' // 此时的样式文件好像js中的对象
function Comp1() {
  return (
    <div className={styles.box}>
      <p>我是comp1组件</p>
    </div>
  )
}

export default Comp1

配置vite-plugin-style-import按需引入样式

npm i vite-plugin-style-import@1.4.1

在vite.config.ts中的配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import * as path from 'path'
import styleImport, { AntdResolve } from 'vite-plugin-style-import'
export default defineConfig({
  plugins: [
    react(),
    styleImport({
      resolves:[
        AntdResolve()
      ]
    })
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, './src')
    }
  }
})

因为antd默认引入的是less文件，因此还需要安装一下less

npm i less@2.7.1

React 中的路由

react18走之前的写法

// src\router\index.tsx
import App  from "@/App";
import Home from "@/views/Home";
import About from "@/views/About";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

// 两种路由模式的组件： BrowserRouter{History 模式} 、HashRouter{hash模式}
const baseRouter = () => (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App/>}>
         {/*Navigate 重定向  */}
        <Route path="/" element={<Navigate to="/home"/>}></Route>
        <Route path="/home" element={<Home/>}></Route>
        <Route path="/about" element={<About/>}></Route>
      </Route>
    </Routes>
  </BrowserRouter>
)

export default baseRouter

// src\main.tsx
import Router from './router'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Router />
  </React.StrictMode>,
)

// src\App.tsx
import { Outlet, Link } from 'react-router-dom'
// Outlet 是占位符类似于vue的router-view
function App() {
  return (
    <div className="App">
      {/* Link 类似于vue的route-link */}
      <Link to="/home">Home</Link>|
      <Link to="/about">About</Link>
      <Outlet></Outlet>
    </div>
  )
}

export default App

React18 路由新写法

路由新写法支持路由对象的形式编写路由

// src\router\index.tsx
import Home from "@/views/Home";
import About from "@/views/About";
import { Navigate } from 'react-router-dom'
// Navigate 路由重定向
const routes = [
  {
    path: '/',
    element: <Navigate to="/home"/>
  },
  {
    path: '/home',
    element: <Home />
  },
  {
    path: '/about',
    element: <About />
  }
]

export default routes

// src\main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import 'reset-css'
import App from './App'
import { BrowserRouter } from 'react-router-dom'
import '@/assets/style/global.scss'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </React.StrictMode>,
)

// src\App.tsx
import { useRoutes, Link } from 'react-router-dom'
import routes from './router'
function App() {
  const outlet = useRoutes(routes) // hook 形式的页面占位符
  return (
    <div className="App">
      {/* Link 类似于vue的route-link */}
      <Link to="/home">Home</Link>|
      <Link to="/about">About</Link>
      { outlet }
    </div>
  )
}

export default App

路由懒加载

路由懒加载需要借助react的lazy 方法并且需要搭配react的Suspense组件

import React, { lazy } from 'react'
import { Navigate } from 'react-router-dom'
// 因为Home组件首页需要显示因此无需懒加载
import Home from "@/views/Home";
// 组件懒加载
const About = lazy(() => import("@/views/About"))
// 懒加载的组件需要用Suspense包裹
const withLoadingComponent = (comp:JSX.Element) => (
  <React.Suspense fallback={<div>Loading...</div>}>
    { comp }
  </React.Suspense>
)
const routes = [
  {
    path: '/',
    element: <Navigate to="/home"/>
  },
  {
    path: '/home',
    element: <Home />
  },
  {
    path: '/about',
    element: withLoadingComponent(<About />)
  }
]

export default routes