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

news2024/11/13 10:38:51

前言

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

项目gitee地址：lbking666666/enqi-admin

项目初始化

  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.coloradmin.cn/o/2148624.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Zabbix 部署----安装Zabbix(业务主机)

Zabbix 部署----安装Zabbix(业务主机)

目录 1、另外准备一台虚拟机(192.xx.xx.20) 设置主机名 关闭防火墙、selinux 准备zabbix-repo 安装zabbix-agent 配置主服务器地址 启动zabbix-agent&#xff1a;10050 1、另外准备一台虚拟机(192.xx.xx.20) 设置主机名 hostname web1 关闭防火墙、selinux syst…
阅读更多...
RS®AREG100A 汽车电子雷达回波发生器

RS®AREG100A 汽车电子雷达回波发生器

AREG100A 汽车电子雷达回波发生器 轻松进行可靠的汽车电子雷达传感器生产测试 综述 R&SAREG100A 汽车电子雷达回波发生器是一款强大的智能解决方案&#xff0c;可用于生产过程中的汽车电子雷达传感器测试。借助 R&SAREG100A&#xff0c;生产工程师可获得多种优势&am…
阅读更多...
二、编译原理-词法分析

二、编译原理-词法分析

一、词法分析器的作用 1、词法分析器的作用 读入字符流&#xff0c;组成词素&#xff0c;输出词法单元序列 过滤空白、换行、制表符、注释等 将词素添加到符号表中&#xff0c;以便编译的各个阶段取用 2、词法单元、模式、词素 &#xff08;1&#xff09;词法单元 (token…
阅读更多...
Halcon OCR检测 免训练版

Halcon OCR检测 免训练版

一.前言&#xff1a; 目前新版的Halcon已经具备了DeepOcr的功能可以涵盖大部分的识别场景&#xff0c;缺点是有些特殊的应用场景依然需要大量的图片训练&#xff0c;而且Halcon22之前的版本DeepOCR是不支持训练的&#xff0c;我们都知道传统的OCR项目是通过Blob分析&#xff0…
阅读更多...
Linux中的进程入门

Linux中的进程入门

冯诺依曼体系结构 操作系统(Operator System) 进程控制块&#xff08;PCB&#xff09; struct task_struct{//该进程的所有属性//该进程对应的代码和属性地址struct task_struct* next; }; struct task_struct 内核结构体——>创建内核结构体对象(task_struct&#xff09;…
阅读更多...
【vue element-ui】表单连锁验证，el-form validate函数失效问题

【vue element-ui】表单连锁验证，el-form validate函数失效问题

实现效果：连锁表单验证，在LED版本号选择为升级版LED时候，标题名称不超过8 实现代码： <el-form:model="configuration"ref="form":rules="rule"size="small"label-width="130px"v-if="isture == 1"><…
阅读更多...
Docker笔记-Docker Dockerfile

Docker笔记-Docker Dockerfile

Docker笔记-Docker Dockerfile Dockerfile 是一个用来构建镜像的文本文件&#xff0c;文本内容包含了一条条构建镜像所需的指令和说明。 这里讲解如何运行 Dockerfile 文件来定制一个镜像。 DockerFile构建过程解析&#xff1a; 1、每条保留字指令都必须为大写字母且后面要…
阅读更多...
基于SpringBoot的图书进销存管理系统【附源码】

基于SpringBoot的图书进销存管理系统【附源码】

基于SpringBoot的图书进销存管理系统&#xff08;源码L文说明文档&#xff09; 目录 4 系统设计 4.1 系统概述 4.2系统结构 4.3.数据库设计 4.3.1数据库实体 4.3.2数据库设计表 5系统详细实现 5.1 用户信息管理 5.2 图书类型管理 5.3 商品…
阅读更多...
【雪球-注册安全分析报告-无验证方式导致安全隐患】

【雪球-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…
阅读更多...
JavaWeb 实验一

JavaWeb 实验一

实验一 环境配置和Web工程的创建 目的&#xff1a; 掌握Java Web编程环境的配置创建简单的Web工程&#xff0c;并了解Web工程下各目录的作用掌握部署、运行Web工程的流程 实验过程&#xff1a; 一、完成如下要求。 安装并设置JDK 1.8、Tomcat 9.0&#xff08;tomcat和jdk版…
阅读更多...
如何才能开发出最适合自己公司的网站？

如何才能开发出最适合自己公司的网站？

开发最适合自己公司的网站是一个综合性的项目&#xff0c;需要从多个角度进行考虑和规划。以下是一些关键步骤和建议&#xff1a; 一、明确目标与定位 确定网站目标&#xff1a;明确网站的核心目的&#xff0c;如提升品牌知名度、展示公司产品或服务、促进销售、提供客户服务…
阅读更多...
Zabbix_5.0 构建企业级监控告警平台----图形监控

Zabbix_5.0 构建企业级监控告警平台----图形监控

目录 Apache监控示例&#xff08;图形监控&#xff09; 创建主机群组&#xff08;192.xx.xx.10&#xff09; 创建主机&#xff08;192.xx.xx.10&#xff09; 创建图形 查看是否添加成功 Apache监控示例&#xff08;图形监控&#xff09; 创建主机群组&#xff08;192.xx.…
阅读更多...
数字化时代，住宅代理是怎样为企业赋能的？

数字化时代，住宅代理是怎样为企业赋能的？

在数字化时代&#xff0c;企业的发展也面临着转型&#xff0c;一方面是未知的挑战&#xff0c;一方面是不可多得的机遇。如何在全球市场中保持竞争力是企业要认真思考的问题。如果说主动寻找出路太过冒险&#xff0c;那不妨试试内省式的自我管理革新。代理服务器是一种中介服务…
阅读更多...
LIN总线CAPL函数—— 设置与测量从节点的波特率（linSetRespBaudrate）

LIN总线CAPL函数—— 设置与测量从节点的波特率（linSetRespBaudrate）

&#x1f345; 我是蚂蚁小兵&#xff0c;专注于车载诊断领域&#xff0c;尤其擅长于对CANoe工具的使用&#x1f345; 寻找组织 &#xff0c;答疑解惑&#xff0c;摸鱼聊天&#xff0c;博客源码&#xff0c;点击加入&#x1f449;【相亲相爱一家人】&#x1f345; 玩转CANoe&…
阅读更多...
springsecurity+jwt实现前后端分离认证授权

springsecurity+jwt实现前后端分离认证授权

文章目录 1.简介2.快速入门3.认证3.1登录校验流程3.2原理初探3.3认证详流程详解3.4 分析UsernamePasswordAuthenticationFilter 4.案例实战4.1 思路分析4.2准备工作4.3实战1.数据库校验用户2.核心代码1.创建UserDetailsService实现类2.创建UserDetails实现类3.密码加密存储模式…
阅读更多...
基于Python的自然语言处理系列（13）：TorchText + GRU + 上下文向量 + Teacher Forcing

基于Python的自然语言处理系列（13）：TorchText + GRU + 上下文向量 + Teacher Forcing

在上一篇文章中&#xff0c;我们使用了LSTM来构建一个序列到序列模型&#xff08;seq2seq&#xff09;。虽然LSTM表现良好&#xff0c;但我们想看看能否通过使用门控循环单元&#xff08;GRU&#xff09;并改进信息压缩的方式来提升模型性能。GRU和LSTM在很多场景下表现相似&am…
阅读更多...
Windows Server2016多用户登录破解

Windows Server2016多用户登录破解

使用场景 很多时候&#xff0c;公司开发和测试运维会同时登录同一台windows服务器进行查询、更新、维护等操作&#xff0c;本文就来介绍一下Windows2016配置多人远程桌面登录实现&#xff0c;感兴趣的可以了解一下。 操作流程 &#xff08;1&#xff09;首先桌面需要安装远程…
阅读更多...
etcd之etcd简介和安装(一)

etcd之etcd简介和安装(一)

1、etcd简介 1.1 etcd简介 etcd 是开源的、高可用的分布式key-value存储系统&#xff0c;可用于配置共享和服务的注册和发现&#xff0c;它专注于&#xff1a; 简单&#xff1a;定义清晰、面向用户的API&#xff08;gRPC&#xff09; 安全&#xff1a;可选的客户端TLS证书自…
阅读更多...
uni-app功能 1. 实现点击置顶，滚动吸顶2.swiper一个轮播显示一个半内容且实现无缝滚动3.穿透修改uni-ui的样式

uni-app功能 1. 实现点击置顶，滚动吸顶2.swiper一个轮播显示一个半内容且实现无缝滚动3.穿透修改uni-ui的样式

uni-app项目中遇到的功能 文章目录 uni-app项目中遇到的功能一、实现点击置顶&#xff0c;滚动吸顶、1.1、scroll-view设置不生效的原因和解决办法1.2 功能代码 二、swiper一个轮播显示一个半内容且实现无缝滚动三、穿透修改uni-ui的样式 一、实现点击置顶&#xff0c;滚动吸顶…
阅读更多...
PMP--二模--解题--1-10

PMP--二模--解题--1-10

文章目录 4.整合管理--商业文件--商业论证&#xff08;是否值得所需投资、高管们决策的依据&#xff09;反映了&#xff1a;1、 [单选] 收到新项目的客户请求之后&#xff0c;项目经理首先应该做什么&#xff1f; 14.敏捷--角色--产品负责人PO–职责–1.创建待办列表并排序;2.确…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023