当前位置： 首页 > article >正文

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

article 2024/11/16 14:58:31

前言

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

项目gitee地址：lbking666666/enqi-admin

  本系列文章：

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

项目初始化

  1. 执行命令 
     ​​​​​​​npm create vite
  2. 输入项目名称：给项目起个名字
  3. 选择使用的框架：react
  4. 选择语言（  SWC是JavaScript编译工具比Babel要快，但是在功能和插件生态系统方面Babel更完善）88849ad8cab64ab3bcb799e3a66e2194.png
  5. 选择完成后，按照提示进入项目文件夹b7087bf09f944606860476b97326c577.png
  6. 安装依赖799cd72441d34713992645e9ac17a0c8.png

配置

路径别名

在vite.config.ts里面配置：

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的类型声明文件:

npm i -D @types/node

或

yarn add @types/node -D

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

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

样式重置

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

npm install normalize.css -S

或

yarn add normalize.css

在main.ts文件引入：

import 'normalize.css'

配置Less

npm install  less -S

或者

yarn add less

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

b1bd16b24325462c902a2beb6b9aa948.png

539eb273d77d4317b956b728415b0cf0.png

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

配置Tailwind CSS

安装依赖

npm install -D tailwindcss postcss autoprefixer

成功后执行

npx tailwindcss init -p

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

//tailwind.config.js

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


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

引入antd

npm install antd -S

或

yarn add antd

引入路由

npm install react-router-dom -S

或

yarn add react-router-dom

 createBrowserRouter模式

使用推荐的路由createBrowserRouter模式；

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

0131424c24eb4723a3882a40cdf64e9a.png

路由文件

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

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

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

创建布局组件

目前没有路由所需的文件

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

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

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

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

将布局组件添加到路由

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

//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文件内容

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

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

export default App

保存后运行命令

npm run dev

预览效果

d8b4324ecea144389efa3d49bfde7908.png

改造布局组件

 在Ant Design上选择布局

b12c505252ac44979cd1399a76bfcb81.png

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

0fdc6f8b78584318a6697d2a992b36a6.png

修改布局组件代码

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

保存后预览效果如下

64419a76412c45f4ba424799a3231886.png

添加全局样式

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

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

引入tailwind css 

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

添加一些样式

//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

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的样式

e758be219dcc43eb8e54eca6948fdd37.png

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样式生效了

bdef57057e4e464d9c7b7b93c57c92b1.png

拆分布局组件

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

d01a042c2ce148c4bcd8eba5bd8bfb76.png

侧边组件

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

//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的处理

//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;

主体组件

//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文件如下

//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开发后台管理项目的系列文章


http://www.kler.cn/a/321248.html

相关文章：

  • Qt文件目录操作
  • 2024 CCF中国开源大会“开源科学计算与系统建模openSCS”分论坛成功举办
  • ubuntu下openssl签名证书制作流程及验证demo
  • 常用在汽车PKE无钥匙进入系统的高度集成SOC芯片：CSM2433
  • 【鸿蒙开发】第十一章 Stage模型应用组件-任务Mission
  • Docker在CentOS上的安装与配置
  • 以数赋能实景三维创新“科技+文旅”
  • 数据结构-3.1.栈的基本概念
  • Redis常用命令笔记
  • Leetcode - 139双周赛
  • Snap 发布新一代 AR 眼镜，有什么特别之处？
  • sentinel-dashboard数据 redis 持久化
  • 甘蔗茎节检测系统源码分享
  • Elasticsearch——介绍、安装与初步使用
  • C语言指针系列1——初识指针
  • CSDN文章导出md并迁移至博客园
  • 数据结构——初始树和二叉树
  • Spring AOP - 配置文件方式实现
  • 【IEEE 独立出版，快速EI检索】第四届人工智能、虚拟现实与可视化国际学术会议（AIVRV 2024）
  • 【编程基础知识】Cookie、Session和JWT（JSON Web Token）
  • Linux 学习 awk 和sed 命令使用
  • 欧洲欧盟药品数据库：EMA、HMA、EDQM-一键查询
  • WEB 编程：富文本编辑器 Quill 配合 Pico.css 样式被影响的问题之Shadow DOM
  • PostgreSQL 向量数据存储指南
  • 即梦PixelDance：从追赶到领跑，一跃成为全球AI竞赛的领航者！
  • 付费计量系统的标准化框架（下）