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

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

news 来源：原创 2024/9/22 16:27:24

前言

本文将引导开发者从零基础开始，运用、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开发后台管理项目（三） 

项目初始化

  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.jsexport 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" /><Menutheme="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 }}><Buttontype="text"icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}onClick={() => setCollapsed(!collapsed)}style={{fontSize: "16px",width: 64,height: 64,}}/></Header><Contentstyle={{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" /><Menutheme="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 }}><Buttontype="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 (<Contentstyle={{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开发后台管理项目的系列文章

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Python计算机视觉 第10章-OpenCV
  • vulnhub（12）：bob 1.0.1（gpg文件解密）
  • 你了解system V的ipc底层如何设计的吗？消息队列互相通信的原理是什么呢？是否经常将信号量和信号混淆呢？——问题详解
  • 构建高可用和高防御力的云服务架构：从DDoS高防到PolarDB
  • （SERIES10）DM逻辑备份还原
  • 828华为云征文 | 在Huawei Cloud EulerOS系统中安装Docker的详细步骤与常见问题解决
  • iTerm2下载并配置
  • 面向对象程序设计
  • react hooks--React.memo
  • 出厂非澎湃OS手机解BL锁
  • 企业急于采用人工智能，忽视了安全强化
  • 计算机毕业设计公交站点线路查询网站登录注册搜索站点线路车次/springboot/javaWEB/J2EE/MYSQL数据库/vue前后分离小程序
  • 如何将很多个pdf拼接在一起？很多种PDF拼接的方法
  • 通信-互联网技术-第一章计算机网络与协议
  • 基于SpringBoot+Vue的高校门禁管理系统
  • 时间复杂度分析经典问题——最大子序列和
  • $translatePartialLoader加载失败及解决方式
  • Fastjson的基本使用方法大全
  • javascript面向对象之创建对象
  • k8s如何管理Pod
  • LeetCode29.两数相除 JavaScript
  • Python学习笔记 字符串拼接
  • SpiderData 2019年2月13日 DApp数据排行榜
  • 仿天猫超市收藏抛物线动画工具库
  • 普通函数和构造函数的区别
  • 什么软件可以剪辑音乐？
  • 用 Swift 编写面向协议的视图
  • 走向全栈之MongoDB的使用
  • ​Kaggle X光肺炎检测比赛第二名方案解析 | CVPR 2020 Workshop
  • $.each()与$(selector).each()
  • (cljs/run-at (JSVM. :browser) 搭建刚好可用的开发环境!)
  • (阿里云万网)-域名注册购买实名流程
  • (回溯) LeetCode 131. 分割回文串
  • （六）软件测试分工
  • (生成器)yield与(迭代器)generator
  • (转)Sql Server 保留几位小数的两种做法
  • *p=a是把a的值赋给p，p=a是把a的地址赋给p。
  • .gitignore文件_Git：.gitignore
  • .net core 的缓存方案
  • .NET Entity FrameWork 总结 ，在项目中用处个人感觉不大。适合初级用用，不涉及到与数据库通信。
  • .NET Windows：删除文件夹后立即判断，有可能依然存在
  • .net 简单实现MD5
  • .NET 设计模式—适配器模式（Adapter Pattern）
  • .NET(C#) Internals: as a developer, .net framework in my eyes
  • .Net(C#)自定义WinForm控件之小结篇
  • .NET/C# 中设置当发生某个特定异常时进入断点（不借助 Visual Studio 的纯代码实现）
  • .NET单元测试
  • [ 隧道技术 ] 反弹shell的集中常见方式（四）python反弹shell
  • [AIGC] SpringBoot的自动配置解析
  • [BJDCTF2020]EzPHP1
  • [C++]拼图游戏
  • [CUDA 学习笔记] CUDA kernel 的 grid_size 和 block_size 选择
  • [imx9]DDR test Tool for imx9
  • [ios-必看] IOS调试技巧：当程序崩溃的时候怎么办 iphone IOS
  • [LeetCode]—Simplify Path 简化路径表达式