使用vite+react+ts+Ant Design开发后台管理项目（一）

前言

本文将引导开发者从零基础开始，运用vite、react** 、react-router 、react-redux、** Ant Design**、less、tailwindcss、axios**等前沿技术栈，构建一个高效、响应式的后台管理系统。通过详细的步骤和实践指导，文章旨在为开发者揭示如何利用这些技术工具，从项目构思到最终实现的全过程，提供清晰的开发思路和实用的技术应用技巧。

项目gitee地址：lbking666666/enqi-admin

本系列文章：

项目初始化

执行命令
bash 复制代码
```
 npm create vite
```
输入项目名称：给项目起个名字
选择使用的框架：react
选择语言（ SWC是JavaScript编译工具比Babel要快，但是在功能和插件生态系统方面Babel更完善）
选择完成后，按照提示进入项目文件夹
安装依赖

配置

路径别名

在vite.config.ts里面配置：

javascript 复制代码

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, './src') // 路径别名
      ...
    }
  }
})

如果开发环境是ts，会提示如找不到path或找不到__dirname等，需要先安装一下node的类型声明文件:

bash 复制代码

npm i -D @types/node

或

bash 复制代码

yarn add @types/node -D

修改tsconfig.json文件：添加baseUrl和paths

javascript 复制代码

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

样式重置

安装normlize.css重置游览器样式

bash 复制代码

npm install normalize.css -S

或

bash 复制代码

yarn add normalize.css

在main.ts文件引入：

bash 复制代码

import 'normalize.css'

配置Less

javascript 复制代码

npm install  less -S

或者

bash 复制代码

yarn add less

安装成功后修改app.css为app.less 使用嵌套写法验证下less是否可以正常使用

验证less没有问题，后续就可以直接使用less开发

配置Tailwind CSS

安装依赖

bash 复制代码

npm install -D tailwindcss postcss autoprefixer

成功后执行

bash 复制代码

npx tailwindcss init -p

生成tailwind.config.js和postcss.config.js文件

javascript 复制代码

//tailwind.config.js

export default {
  content: ["./index.html","./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

javascript 复制代码

//postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

引入antd

bash 复制代码

npm install antd -S

或

bash 复制代码

yarn add antd

引入路由

bash 复制代码

npm install react-router-dom -S

或

bash 复制代码

yarn add react-router-dom

`createBrowserRouter模式`

使用推荐的路由createBrowserRouter模式；

使用对象方式处理路由，这种配置结构更清晰；

路由文件

在src下新增router文件夹添加index.tsx文件

javascript 复制代码

//router/index.tsx
import { createBrowserRouter } from "react-router-dom";

const routers = createBrowserRouter([
    
]);
export default routers;

创建布局组件

目前没有路由所需的文件

先在src文件夹下创建一个layout文件夹添加index.tsx文件

写一个基本的组件页面只包含一个div文本内容为App Layout

注意：React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母

javascript 复制代码

const AppLayout =()=>{
    return (<div>App Layout</div>)
}
export default AppLayout;

将布局组件添加到路由

修改router文件夹下的index.tsx文件，添加AppLayout组件

javascript 复制代码

//router/index.tsx
import { createBrowserRouter} from "react-router-dom";
import AppLayout from "@/layout/index";

const routers = createBrowserRouter([
  {
    path: "/",
    element: <AppLayout />,
    children: [], // 如果需要子路由，可以在这里添加
  },
]); 

export default routers;

将路由挂载到app.tsx

修改src文件夹下的app.tsx文件内容

javascript 复制代码

//app.tsx
import { RouterProvider } from "react-router-dom";
import routers from '@/router';

function App() {
  return (
    <>
      <RouterProvider router={routers} />
    </>
  )
}

export default App

保存后运行命令

bash 复制代码

npm run dev

预览效果

改造布局组件

在Ant Design上选择布局

这里我选择了一个侧边栏布局查看代码，这里选择typeScript语言的代码

修改布局组件代码

直接复制这里的代码到layout文件夹下的index.tsx文件中替换原来的内容

保存后预览效果如下

添加全局样式

上图中高度不能铺满屏幕，这里需要设置一些样式

创建src文件夹下main.less文件

引入tailwind css

css 复制代码

//main.less
@tailwind base;
@tailwind components;
@tailwind utilities;

添加一些样式

css 复制代码

//main.less

@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,body,#root,.app-layout{
  height:100%;
}

main.tsx中引入main.less

javascript 复制代码

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import 'normalize.css'
import './main.less'


createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

测试tailwind css

修改layout下的index.tsx文件

在content文本上添加一些tailwind css的样式

javascript 复制代码

import React, { useState } from "react";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from "@ant-design/icons";
import { Button, Layout, Menu, theme } from "antd";

const { Header, Sider, Content } = Layout;

const App: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  return (
    <Layout className="app-layout ">
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={["1"]}
          items={[
            {
              key: "1",
              icon: <UserOutlined />,
              label: "nav 1",
            },
            {
              key: "2",
              icon: <VideoCameraOutlined />,
              label: "nav 2",
            },
            {
              key: "3",
              icon: <UploadOutlined />,
              label: "nav 3",
            },
          ]}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: "16px",
              width: 64,
              height: 64,
            }}
          />
        </Header>
        <Content
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          <div className="bg-blue-500 text-white p-4 rounded-md">Content</div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default App;

可以看到tailwind css样式生效了

拆分布局组件

因为目前的布局组件是都在一个文件中，正常项目里面都是拆分为多个组件中写逻辑，现在需要把layout文件夹下的index.tsx文件进行拆分，在layout文件夹下新增三个文件header.tsx,sider.tsx和main.tsx，本文先大概拆分layout这个布局组件到各个子组件中，下一篇文章中会详细丰富各个子组件的内容

侧边组件

把index.tsx中的sider部分拿到sider.tsx文件中,里面有个collapsed状态这里先去掉，之后会使用redux状态管理来处理这里

javascript 复制代码

//sider.tsx
import {
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from "@ant-design/icons";
import { Layout, Menu } from "antd";

const { Sider } = Layout;
const AppSider = () => {
  return (
    <Sider trigger={null} collapsible>
      <div className="demo-logo-vertical" />
      <Menu
        theme="dark"
        mode="inline"
        defaultSelectedKeys={["1"]}
        items={[
          {
            key: "1",
            icon: <UserOutlined />,
            label: "nav 1",
          },
          {
            key: "2",
            icon: <VideoCameraOutlined />,
            label: "nav 2",
          },
          {
            key: "3",
            icon: <UploadOutlined />,
            label: "nav 3",
          },
        ]}
      />
    </Sider>
  );
};
export default AppSider;

头部组件

同样这里也去掉了collapsed处理和点击事件collapsed的处理

javascript 复制代码

//header.tsx
import { Button, Layout, theme } from "antd";
import {
    MenuFoldOutlined,
  } from '@ant-design/icons';
const { Header} = Layout;
const AppHeader = () => {
  const {
    token: { colorBgContainer},
  } = theme.useToken();
  return (
    <Header style={{ padding: 0, background: colorBgContainer }}>
      <Button
        type="text"
        icon={<MenuFoldOutlined />}
        style={{
          fontSize: "16px",
          width: 64,
          height: 64,
        }}
      />
    </Header>
  );
};
export default AppHeader;

主体组件

javascript 复制代码

//main.tsx
import { Layout, theme } from "antd";

const { Content } = Layout;
const AppMain = () => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
    <Content
      style={{
        margin: "24px 16px",
        padding: 24,
        minHeight: 280,
        background: colorBgContainer,
        borderRadius: borderRadiusLG,
      }}
    >
      <div className="bg-blue-500 text-white p-4 rounded-md">Content</div>
    </Content>
  );
};
export default AppMain;

重组布局组件

目前已经把头部、侧边栏、主体都已经拆分出去了需要改造下index.tsx文件如下

javascript 复制代码

//layout/index.tsx
import React from "react";
import {Layout} from "antd";
import AppHeader from "./header";
import AppSider from "./sider";
import AppMain from "./main";

const App: React.FC = () => {
  return (
    <Layout className="app-layout ">
      <AppSider />
      <Layout>
        <AppHeader />
        <AppMain />
      </Layout>
    </Layout>
  );
};

export default App;

后续

因篇幅限制后续会持续写vite+react+ts+Ant Design开发后台管理项目的系列文章