【React】AntD组件---极客园--01.项目前置准备

项目搭建

基于CRA创建项目

CRA是一个底层基于webpack快速创建React项目的脚手架工具

# 使用npx创建项目
npx create-react-app react-jike# 进入到项
cd react-jike# 启动项目
npm start

在这里插入图片描述

调整项目目录结构

-src-apis           项目接口函数-assets         项目资源文件,比如,图片等-components     通用组件-pages          页面组件-store          集中状态管理-utils          工具,比如,token、axios 的封装等-App.js         根组件-index.css      全局样式-index.js       项目入口

src/index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.scss'
import './App.js'ReactDOM.createRoot(document.getElementById('root')).render(<React.StrictMode><App/></React.StrictMode>
)

src/App.js

const App = () => {return <div>this is app</div>
}export default App

使用scss预处理器

SASS 是一种预编译的 CSS,支持一些比较高级的语法,可以提高编写样式的效率,CRA接入scss非常简单只需要我们装一个sass工具

实现步骤

  1. 安装解析 sass 的包:npm i sass -D
  2. 创建全局样式文件:index.scss
body {margin: 0;div {color: blue;}
}

组件库antd使用

我们的项目是一个传统的PC管理后台,有现成的组件库可以使用,帮助我们提升开发效率,其中使用最广的就是antD

Ant Design of React - Ant Design
实现步骤

  1. 安装 antd 组件库:npm i antd
  2. 导入 Button 组件
  3. 在 Login 页面渲染 Button 组件进行测试

测试Button
pages/Login/index.jsx

import { Button } from 'antd'const Login = () => {return <div>this is login<Button type='primary'>test</Button></div>
}
export default Login

在这里插入图片描述

配置基础路由

单页应用需要对应的路由支持,我们使用 react-router-dom 最新版本

实现步骤
在这里插入图片描述

  1. 安装路由包 npm i react-router-dom
  2. 准备 LayoutLogin俩个基础组件
  3. 配置路由

代码实现
pages/Layout/index.js

const Layout = () => {return <div>this is layout</div>
}
export default Layout

pages/Login/index.js

const Login = () => {return <div>this is login</div>
}
export default Login

router/index.js

import { createBrowserRouter } from 'react-router-dom'import Login from '../pages/Login'
import Layout from '../pages/Layout'const router = createBrowserRouter([{path: '/',element: <Layout />,},{path: '/login',element: <Login />,},
])export default router

index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.scss'
import router from './router'
import { RouterProvider } from 'react-router-dom'ReactDOM.createRoot(document.getElementById('root')).render(<RouterProvider router={router} />
)

配置别名路径

项目背景:在业务开发过程中文件夹的嵌套层级可能会比较深,通过传统的路径选择会比较麻烦也容易出错,设置路径别名可以简化这个过程
在这里插入图片描述

路径编译配置

  1. 安装 craco 工具包
  2. 增加 craco.config.js 配置文件
  3. 修改 scripts 命令
  4. 测试是否生效
npm i @craco/craco -D
const path = require('path')module.exports = {// webpack 配置webpack: {// 配置别名alias: {// 约定:使用 @ 表示 src 文件所在路径'@': path.resolve(__dirname, 'src')}}
}
"scripts": {"start": "craco start","build": "craco build","test": "craco test","eject": "react-scripts eject"
}
import { createBrowserRouter } from 'react-router-dom'import Login from '@/pages/Login'
import Layout from '@/pages/Layout'const router = createBrowserRouter([{path: '/',element: <Layout />,},{path: '/login',element: <Login />,},
])export default router

VsCode提示配置

实现步骤

  1. 在项目根目录创建 jsconfig.json 配置文件
  2. 在配置文件中添加以下配置

代码实现

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

:::warning
说明:VSCode会自动读取jsconfig.json 中的配置,让vscode知道@就是src目录
:::

使用gitee管理项目

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/31847.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

制作WIFI二维码,实现一键扫描连接WIFI

在现代社会&#xff0c;Wi-Fi已成为我们日常生活中不可或缺的一部分。无论是在家庭、办公室还是公共场所&#xff0c;我们都希望能够快速方便地连接到Wi-Fi网络。下面小编就来和大家分享通过制作WIFI二维码&#xff0c;来实现一键扫描就可以连接WIFI的方法。连接WIFI不用在告诉…

课时162:脚本发布_大型脚本_锁文件

2.2.4 锁文件 学习目标 这一节&#xff0c;我们从 基础知识、简单实践、小结 三个方面来学习 基础知识 简介 需求&#xff1a;同一时间段内&#xff0c;只允许有一个用户来执行这个脚本如果脚本执行的时候&#xff0c;有人在执行&#xff0c;那么输出报错&#xff1a;脚本…

CSS中几种常用的清除浮动的方法

在CSS中&#xff0c;浮动元素&#xff08;使用float属性的元素&#xff09;会脱离正常的文档流&#xff0c;这有时会导致父元素无法正确包裹其浮动子元素&#xff0c;从而产生布局问题。为了解决这个问题&#xff0c;我们需要清除浮动。以下是几种常用的清除浮动的方法&#xf…

vue3特性-Teleport源码

文章目录 前言源码分析1. Teleport 组件定义2. process 方法3. 挂载逻辑4. 更新逻辑5. 移除和移动逻辑 总结参考资料 前言 Teleport 是 Vue 3 的一个内置组件&#xff0c;它允许你将组件的内容渲染到 DOM 树的其他位置&#xff0c;而不是其父组件的 DOM 层次结构中。下面是对 …

STL中的迭代器是如何工作的

STL&#xff08;Standard Template Library&#xff09;中的迭代器是C标准模板库中的一个核心概念&#xff0c;它提供了一种访问容器&#xff08;如vector、list、map、set等&#xff09;中元素的统一接口&#xff0c;使得我们可以不暴露容器的内部实现细节就能访问容器内的元素…

【课程表算法题--拓扑排序】

课程表1 你这个学期必须选修 numCourse 门课程&#xff0c;记为 0 到 numCourse-1。在选修某些课程之前需要一些先修课程。 例如&#xff0c;想要学习课程 0 &#xff0c;你需要先完成课程 1 &#xff0c;我们用一个匹配来表示他们&#xff1a;[0,1]。给定课程总量以及它们的先…

【仿真建模-anylogic】INetwork相关接口说明

Author&#xff1a;赵志乾 Date&#xff1a;2024-06-22 Declaration&#xff1a;All Right Reserved&#xff01;&#xff01;&#xff01; 1. 类图 2. 说明 INetwork为辊道网络、路线网路的顶层接口&#xff0c;其组成元素有节点和路径两种&#xff0c;对应的接口为INode、IP…

vue:vue2与vue3如何全局注册公共组件(包括涉及到的相关方法函数的讲解)

目录 第一章 vue2全局注册公共组件 1.1 方法一&#xff1a;逐个注册 1.2 方法二&#xff1a;批量注册 1.2.1 require.context()方法解释 第二章 vue3全局注册公共组件 1.1 方法一&#xff1a;逐个注册 1.2 方法二&#xff1a;批量注册 第一章 vue2全局注册公共组件 Vue…

[C++][数据结构][跳表]详细讲解

目录 0.什么是跳表&#xff1f;1.SkipList的优化思路2.SkipList的效率如何保证&#xff1f;3.SkipList实现4.SkipList VS 平衡搜索树 && Hash 0.什么是跳表&#xff1f; SkipList本质上也是一种查找结构&#xff0c;用于解决算法中的查找问题&#xff0c;跟平衡搜索树…

Linux测试服务器端口是否打开

前言 服务器端口在计算机网络通信中扮演着至关重要的角色&#xff0c;其作用可以归纳如下&#xff1a; 区分不同的应用程序或服务&#xff1a; 服务器端口用于标识和定位不同应用程序或服务在服务器上的通信入口。 通过不同的端口号&#xff0c;服务器可以同时运行多个应用程…

73. UE5 RPG 优化投射物以及敌人生成

解决发射物会与地面产生交互的问题 之前一直遇到发射物的体积过大会在发射时&#xff0c;和地面产生交互&#xff0c;我们可以调整小一些&#xff0c;然后为了防止它和自身产生交互事件。我们可以实现它在生成后&#xff0c;不会触发相关事件&#xff0c;而是在一定时间后。 对…

【STM32--Cortex-M3】

STM32-Cortex-M3 ■ Cortex-M3 处理器内核到基于Cortex-M3的MCU■ ARM的各种架构版本■ 指令集■ Cortex-M3简介■ Cortex-M3寄存器组■ Cortex-M3■ Cortex-M3■ Cortex-M3 ■ Cortex-M3 处理器内核到基于Cortex-M3的MCU Cortex-M3处理器内核是单片机的中央处理单元&#xff…

WordPress简单好看的线报主题模板源码

安装说明 到WordPress管理后台中的「外观」-「主题」中点击「添加」&#xff0c;选择baolog的主题包进行上传安装并启用即可。 提示&#xff1a;为了防止主题不兼容&#xff0c;请在安装主题前进行数据备份&#xff0c;防止数据字段重复覆盖等情况发生。 源码截图 源码下载 …

python实训day1

1、 dd2 dict(id101, name小明, age23, score[90, 67, 98]) print(dd2) print() print(dd2.id ->, dd2.get(id)) # 101 print(dd2.age ->, dd2.get(age)) # 23 print() """字典数据由三部分组成&#xff1a;1、键集2、值集&#xff1b;3、元素集&…

三种方式实现人车流统计(yolov5+opencv+deepsort+bytetrack+iou)

一、运行环境 1、项目运行环境如下 2、CPU配置 3、GPU配置 如果没有GPU yolov5目标检测时间会比较久 二、编程语言与使用库版本 项目编程语言使用c++,使用的第三方库,onnxruntime-linux-x64-1.12.1,opencv-4.6.0 opencv 官方地址Releases - OpenCV opencv github地址ht…

使用Redis优化Java应用的性能

使用Redis优化Java应用的性能 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们来探讨如何使用Redis优化Java应用的性能。Redis是一种开源的内存数据结构…

【面试】http

一、定义 HTTP&#xff08;超文本传输协议&#xff09;&#xff0c;是一种用于分布式、协作式、超媒体信息系统的应用层协议&#xff0c;它是万维网数据通信的基础。主要特点是无状态&#xff08;服务器不会保存之前请求的状态&#xff09;、无连接&#xff08;服务器处理完请…

探索 C# 中的 LINQ:语法和类型

LINQ&#xff08;语言集成查询&#xff09;是 C# 中引入的一项功能&#xff0c;它提供了一种统一的方式来查询来自不同类型数据源&#xff08;如集合、数组、XML、数据库等&#xff09;的数据。LINQ 允许开发人员直接在 C# 代码中编写查询&#xff0c;从而更轻松地操作和转换数…

http发展史(http0.9、http1.0、http1.1、http/2、http/3)详解

文章目录 HTTP/0.9HTTP/1.0HTTP/1.1队头阻塞&#xff08;Head-of-Line Blocking&#xff09;1. TCP 层的队头阻塞2. HTTP/1.1 的队头阻塞 HTTP/2HTTP/3 HTTP/0.9 发布时间&#xff1a;1991年 特点&#xff1a; 只支持 GET 方法没有 HTTP 头部响应中只有 HTML 内容&#xff0…

七、yolov8图像标注和模型训练(目标检测)

环境配置方法&#xff1a;点这里 环境配置完毕后&#xff0c;需要进行标注工作和训练任务&#xff0c;以下分两个部分进行。 图片标注 1、按照以下的格式&#xff0c;将图片放入images中。&#xff08;不限制文件夹路径&#xff09; 2、然后下载labelme标注工具&#xff0…