macOS上进行Ant Design Pro实战教程(一)
由于一个AI项目的前端使用了umi,本教程根据阿里官网上的 《Ant Design 实战教程(beta 版)》来实操一下,我使用macOS操作系统,VS Code 开发环境。
一、开发环境
1、安装nodejs, npm, yarn
官网上建议使用cnpm,由于阿里不维护cnpm了,后续安装使用yarn来实现。安装好后,我的相关版本如下:
node -v
v22.11.0
npm -v
10.9.1
yarn -v
4.4.1
2、安装umi依赖
首先,新建一个空的文件夹,用来存放本课程后续所有的代码。然后,调用 yarn init
来初始化 package.json
,它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件。接着,安装 umi 的依赖。
mkdir antd-course
cd antd-courseyarn init -yyarn add umi --dev
安装完成之后你会发现 package.json
中多出了一项 devDependencies
的配置,里面包含了 "umi": "^4.3.34"。这样其它开发者下载代码后就只需要执行 npm install
后就会自动安装项目依赖的包。
二、第一个页面
1、初始化 umi 的配置
在 umi 中,大量的使用了配置和约定来帮助你快速开发代码。首先,我们先来创建配置文件。配置文件被约定为 config/config.js
。为了让后面的开发更加高效,我们推荐你下载一款适合你的编辑器或者 IDE 来创建和编写代码。本课程中我们使用 VS Code。
在vscode中新建config文件夹,然后新建config.js文件,输入如下代码:
export default {};
一开始它只是 export 了一个默认的空的对象 {}
,并没有什么作用,但是在后面我们会用到。
我们所说的页面是指由一个独立路由对应的 UI 界面。在这一章节中你只需要知道对于这个例子,就是指我们期望通过浏览器访问 127.0.0.1:8000
的时候可以得到一个显示 hello world
的页面。
2、创建hello world页面
首先我们新建一个 src
目录,它用来存放项目的除了配置以及单测以外的主要代码。
在 umi 中,约定的存放页面代码的文件夹是 pages
,我们创建pages文件夹,每个页面在pages下再建立一个文件夹,我们建立一个HelloWorld文件夹。需要修改配置文件为:
export default {routes: [{path: '/',component: './HelloWorld/HelloWorld',}],
}
接下来让我们创建第一个页面组件,新建 src/pages/HelloWorld/HelloWorld.js
文件,代码如下:
export default () => {return <div>hello world</div>;
}
这样第一个页面就创建完成了,代码的具体含义我们会在后面的章节介绍。接下来你就可以通过 umi 来启动你的代码了。首先你需要在 package.json
中的 scripts
里面添加三个命令:
{"name": "antd-course","packageManager": "yarn@4.4.1","scripts": {"start": "umi dev","build": "umi build","preview": "umi preview"},"devDependencies": {"umi": "^4.3.34"}
}
我们在项目目录下运行 yarn start 输出如下:
antd-course % yarn start
info - [你知道吗?] COMPRESS=none umi build 可以关闭项目构建时的代码压缩功能, 方便调试项目的构建产物。
Mako https://makojs.dev is a new fast Rust based bundler from us, which is heavily optimized for umi and much faster than webpack. Visit https://makojs.dev/docs/getting-started#bundle-with-umi for more details if you want to give it a try.
info - Umi v4.3.34
info - Preparing...
info - MFSU eager strategy enabled
event - [MFSU][eager] start build deps
info - [MFSU] buildDeps since cacheDependency has changed╔════════════════════════════════════════════════════╗║ App listening at: ║║ > Local: http://localhost:8000 ║
ready - ║ > Network: http://10.192.197.77:8000 ║║ ║║ Now you can open browser with the above addresses↑ ║╚════════════════════════════════════════════════════╝
info - [MFSU][eager] worker init, takes 347ms
info - [MFSU][eager] build worker start to build
event - [Webpack] Compiled in 470 ms (334 modules)
wait - [Webpack] Compiling...
event - [Webpack] Compiled in 55 ms (334 modules)
wait - [Webpack] Compiling...
event - [Webpack] Compiled in 30 ms (334 modules)
event - [Webpack] Compiled in 754 ms (785 modules)
info - [MFSU][eager] write cache
info - [MFSU] buildDepsAgain
info - [MFSU] skip buildDeps
wait - [Webpack] Compiling...
event - [MFSU][eager] start build deps
info - [MFSU] skip buildDeps
event - [Webpack] Compiled in 492 ms (334 modules)
打开浏览器,输入网址http://127.0.0.1:8000/,然后你将会看到页面上出现Hello world。我们修改HelloWorld.js如下
return <div>hello world, Ant Design Pro!</div>;
不需要重启启动项目,刷新网址http://127.0.0.1:8000/,界面上就自动更新了,如下图所示:
2、添加 umi-plugin-react 插件
umi 是一个可插拔的企业级 react 应用框架,它的很多功能都是通过插件实现。尤其是 umi 官方的 umi-plugin-react 这个插件集成了常用的一些进阶的功能,为了后面的课程需要,我们需要添加该插件集到项目中。
首先通过yarn add umi-plugin-react --dev来安装该插件集。在package.json下会自动生成dev依赖:
"devDependencies": {"umi": "^4.3.34","umi-plugin-react": "^1.15.9"}
3、构建和部署
你可以通过 yarn build
来构建出最终的产物,执行该命令后会生成最终的 HTML、CSS 和 JS 到 dist
目录下。它们是浏览器可以直接识别并运行的代码,这样你就可以将它们部署到你想要的服务器上了。
需要注意的是,如果你直接用浏览器打开 HTML 那是无法正确展示的,因为直接打开无法识别出 HTML 引入的 JS 和 CSS 的路径。你需要确保的的 HTML 在一个 HTTP 的 web 容器中,并保证对应的页面的访问路径正确。更多关于部署的问题可以查看 umi 的部署文档。
三、使用 Ant Design 组件
通过前面的学习,你应该已经搭建完成了脚手架,并且了解了 React 的基本概念。这一节,我们就来教大家如何使用 Ant Design 组件库,完成一个卡片组件(card)。
1、引入 antd
Ant Design 是一个服务于企业级产品的设计体系,组件库是它的 React 实现,antd 被发布为一个 npm 包方便开发者安装并使用。
如果使用我们的脚手架,Ant Design 已经自带了,否则你需要自己安装。
# 脚手架所在的目录
$ yarn add antd
安装完成后,检查 package.json
文件,确认 antd
已正确添加到 dependencies
中:
"dependencies": {"antd": "^5.22.2"}
2、使用 antd
打开src/pages/HelloWorld/HelloWorld.js,
首先,在页面的头部加入一行。
import { Card } from 'antd';
这行代码表示从 antd 引入 Card 组件。接着,把模块默认输出的 hello world 改成下面的样子。
import { Card } from 'antd';export default () => {const style = {width: '400px',margin: '30px',boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2)',border: '1px solid #e8e8e8',};return (<Card style={style} actions={[<a>操作一</a>, <a>操作二</a>]}><Card.Metaavatar={<img alt=""style={{ width: '64px', height: '64px', borderRadius: '32px' }}src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png"/>}title="Alipay"description="在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,这些类似的组件会被抽离成一套标准规范。"/></Card>);
}
上面代码应该很容易看懂。
程序运行效果如下:
相关文章:

macOS上进行Ant Design Pro实战教程(一)
由于一个AI项目的前端使用了umi,本教程根据阿里官网上的 《Ant Design 实战教程(beta 版)》来实操一下,我使用macOS操作系统,VS Code 开发环境。 一、开发环境 1、安装nodejs, npm, yarn 官网上建议使用cnpm…...

智能合约运行原理
点个关注吧!! 用一句话来总结,智能合约就像是一个自动售货机:你投入硬币(触发条件),选择商品(执行合约),然后机器就会自动给你商品(执行结果&…...

安卓动态添加View
在安卓应用中,有很多时候需要动态添加View。比如从后台获取商品列表,根据商品数量在页面渲染对应数量的条目,这时候就需要动态添加View。 1.动态添加View的方法 动态添加View有两种方法: 由代码生成子View:这种方式…...

前端预览pdf文件流
需求 后端接口返回pdf文件流,实现新窗口预览pdf。 解决方案 把后端返回的pdf文件流转为blob路径,利用浏览器直接预览。 具体实现步骤 1、引入axios import axios from axios;2、创建预览方法(具体使用时将axios的请求路径替换为你的后端…...

【测试工具JMeter篇】JMeter性能测试入门级教程(一)出炉,测试君请各位收藏了!!!
一、前言 Apache JMeter是纯Java的开源软件,最初由Apache软件基金会的Stefano Mazzocchi开发,旨在加载测试功能行为和测量性能。可以使用JMeter进行性能测试,即针对重负载、多用户和并发流量测试Web应用程序。 我们选择JMeter原因 是否测试过…...

【zookeeper03】消息队列与微服务之zookeeper集群部署
ZooKeeper 集群部署 1.ZooKeeper 集群介绍 ZooKeeper集群用于解决单点和单机性能及数据高可用等问题。 集群结构 Zookeeper集群基于Master/Slave的模型 处于主要地位负责处理写操作)的主机称为Leader节点,处于次要地位主要负责处理读操作的主机称为 follower 节点…...

从 Llama 1 到 3.1:Llama 模型架构演进详解
编者按: 面对 Llama 模型家族的持续更新,您是否想要了解它们之间的关键区别和实际性能表现?本文将探讨 Llama 系列模型的架构演变,梳理了 Llama 模型从 1.0 到 3.1 的完整演进历程,深入剖析了每个版本的技术创新&#…...

UE5肉鸽游戏教程学习
学习地址推荐:UE5肉鸽项目实战教程_哔哩哔哩_bilibili...

Vue3 - 详细实现虚拟列表前端虚拟滚动列表解决方案,vue3长列表优化之虚拟列表,解决列表动态高度不固定高度及图片视频图文异步请求加载问题,虚拟列表DOM大量数据同时加载渲染卡顿太慢及下滑列表闪烁
前言 Vue2 版本,请访问 这篇文章 在 vue3 项目开发中,详解实现虚拟列表高度不固定(不定高)且复杂含有图片视频等复杂虚拟列表教程,决列表每项高度不确定及img图像或视频的加载方案,利用缓冲区技术解决用户浏览时渲染不及时列表闪烁白屏/列表加载闪屏,解vue3实现虚拟列表优…...

英语知识网站开发:Spring Boot框架技巧
摘要 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了英语知识应用网站的开发全过程。通过分析英语知识应用网站管理的不足,创建了一个计算机管理英语知识应用网站的方案。文章介绍了英语知识应用网站的系…...

基于lvgl+ST7735制作一款esp8285的控制面板程序
要在ESP8285上使用LVGL和ST7735创建一个控制面板程序,你需要遵循以下步骤。这个过程包括设置开发环境,连接硬件,编写代码,以及调校和优化。 所需硬件 ESP8285 开发板:像NodeMCU之类的开发板。ST7735 显示屏:通常是1.8英寸或2.0英寸的SPI接口显示屏。电源和连接线:用于连…...

MySQL 索引详解
在数据库的世界中,索引就像是一本巨大书籍的目录,它能够极大地提高数据检索的效率。在 MySQL 中,索引的合理使用对于数据库的性能至关重要。本文将深入探讨 MySQL 索引的各个方面。 一、索引的概念与作用 1. 什么是索引? 索引是一…...

区块链学习笔记(1)--区块、链和共识 区块链技术入门
常见的hash算法: 文件防篡改:MD5比特币挖矿:SHA256证明数据片段:Merkle root文本去重:SimHash 区块 区块(block)由区块头(block header)和交易列表(transac…...

【Android+多线程】IntentService 知识总结:应用场景 / 使用步骤 / 源码分析
定义 IntentService 是 Android中的一个封装类,继承自四大组件之一的Service 功能 处理异步请求 & 实现多线程 应用场景 线程任务 需 按顺序、在后台执行 最常见的场景:离线下载不符合多个数据同时请求的场景:所有的任务都在同一个T…...

Python Tornado框架教程:高性能Web框架的全面解析
Python Tornado框架教程:高性能Web框架的全面解析 引言 在现代Web开发中,选择合适的框架至关重要。Python的Tornado框架因其高性能和非阻塞I/O特性而备受青睐。它特别适合处理大量并发连接的应用,比如聊天应用、实时数据处理和WebSocket服务…...

通过端口测试验证网络安全策略
基于网络安全需求,项目中的主机间可能会有不同的网络安全策略,这当然是好的,但很多时候,在解决网络安全问题的时候,同时引入了新的问题,如k8s集群必须在主机间开放udp端口,否则集群不能正常的运…...

Excel把其中一张工作表导出成一个新的文件
excel导出一张工作表 一个Excel表里有多个工作表,怎么才能导出一个工作表,让其生成新的Excel文件呢? 第一步:首先打开Excel表格,然后选择要导出的工作表的名字,比如“Sheet1”,把鼠标放到“She…...

第四份工作的环境配置
最近在内网中工作,会遇到不少的环境问题. 下面记录一下这个过程中的挑战: 环境:内网,连接不到外网. 如何配置开发环境: 方法0: 在服务器上安装环境. 但是服务器上没有相应的python包.因为python包是从外界获得的.并且,这些python包不能同步更新.所以,在服务器上直接搭建环…...

SpringBoot开发——Maven多模块工程最佳实践及详细示例
文章目录 一、前言二、Maven多模块工程的最佳实践1、项目结构清晰2、依赖管理统一3、插件配置统一4、版本控制一致5、模块间通信简化 三、详细示例1、项目结构2、父模块(parent)的pom.xml文件3、子模块(module-api)的pom.xml文件4…...

C 语言面向对象
面向对象的基本特性:封装,继承,多态 1.0 面向过程概念 当我们在编写程序时,通常采用以下步骤: 1. 将问题的解法分解成若干步骤 2. 使用函数分别实现这些步骤 3. 依次调用这些函数 这种编程风格的被称作 面向过程…...

无人机探测:光电侦测核心技术算法详解!
核心技术 双光谱探测跟踪: 可见光成像技术:利用无人机表面反射的自然光或主动光源照射下的反射光,通过高灵敏度相机捕捉图像。该技术适用于日间晴朗天气下的无人机探测,具有直观、易于识别目标的特点。 红外成像技术࿱…...

ffmpeg视频滤镜:替换部分帧-freezeframes
滤镜描述 freezeframes 官网地址 > FFmpeg Filters Documentation 这个滤镜接收两个输入,然后会将第一个视频中的部分帧替换为第二个视频的某一帧。 滤镜使用 参数 freezeframes AVOptions:first <int64> ..FV....... set first fra…...

PHP 超级全局变量
超级全局变量是指在php任意脚本下都可以使用 PHP 超级全局变量列表: $GLOBALS:是PHP的一个超级全局变量组,在一个PHP脚本的全部作用域中都可以访问。 $_SERVER:$_SERVER 是一个PHP内置的超级全局变量,它是一个包含了诸如头信息(header)、路…...

Pytorch使用手册-Tensors(专题二)
这段代码是对 PyTorch 中张量(Tensors)的详细介绍和操作演示。以下是逐步讲解: 1. 什么是张量 (Tensor) 张量是一种专门的数据结构,与 NumPy 的多维数组(ndarray)类似: 它可以在 GPU 或其他硬件加速器上运行。张量可以与 NumPy 共享内存,避免不必要的数据拷贝。它是为…...

centos安装小火车
平时没事闲着 装个小火车玩-------->>>>> yum install sl.x86_64 启动命令 sl 就会出现以下场景...

241125学习日志——[CSDIY] [InternStudio] 大模型训练营 [17]
CSDIY:这是一个非科班学生的努力之路,从今天开始这个系列会长期更新,(最好做到日更),我会慢慢把自己目前对CS的努力逐一上传,帮助那些和我一样有着梦想的玩家取得胜利!!&…...

sklearn中常用数据集简介
scikit-learn库中提供了包括分类、回归、聚类、降维等多种机器学习任务所需的常用数据集,方便进行实验和研究,它们主要被封装在sklearn.datasets中,本文对其中一些常用的数据集进行简单的介绍。 1.Iris(鸢尾花)数据集…...

机器学习在教育方面的应用文献综述
引言 随着大数据时代的到来,机器学习作为人工智能的一个重要分支,在教育领域展现出广泛的应用前景。本文综述了机器学习技术在教育领域的应用,包括个性化学习、智能评估、知识图谱构建等多个方面。 个性化学习 个性化学习是机器学习…...

滑动窗口最大值(java)
题目描述 给你一个整数数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例 1: 输入:nums [1,3,-1,-3,5,3,6,7]…...

sklearn学习
介绍:scaler:换算的意思 1. 归一化MinMaxScaler() 归一化的意思是将一堆数,如果比较离散,为了让数据更适合模型训练,将离散的数据压缩到0到1之间,以方便模型更高效优质的学习,而对数据的预处理…...