前言
本文将引导开发者从零基础开始，运用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开发后台管理项目（四）
项目初始化
- 执行命令
npm create vite 输入项目名称：给项目起个名字选择使用的框架：react选择语言（SWC是JavaScript编译工具比Babel要快，但是在功能和插件生态系统方面Babel更完善）
- 选择完成后，按照提示进入项目文件夹
- 安装依赖
配置
路径别名
在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是否可以正常使用
验证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模式；
使用对象方式处理路由，这种配置结构更清晰；
路由文件
在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预览效果
改造布局组件
在Ant Design上选择布局
这里我选择了一个侧边栏布局查看代码，这里选择typeScript语言的代码
修改布局组件代码
直接复制这里的代码到layout文件夹下的index.tsx文件中替换原来的内容
保存后预览效果如下
添加全局样式
上图中高度不能铺满屏幕，这里需要设置一些样式
创建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的样式
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样式生效了
拆分布局组件
因为目前的布局组件是都在一个文件中，正常项目里面都是拆分为多个组件中写逻辑，现在需要把layout文件夹下的index.tsx文件进行拆分，在layout文件夹下新增三个文件header.tsx,sider.tsx和main.tsx，本文先大概拆分layout这个布局组件到各个子组件中，下一篇文章中会详细丰富各个子组件的内容
侧边组件
把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开发后台管理项目的系列文章
