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

macOS上进行Ant Design Pro实战教程（一）

article 2024/11/26 20:21:02

由于一个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-course

yarn init -y

yarn 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.Meta
        avatar={<img 
          alt=""
          style={{ width: '64px', height: '64px', borderRadius: '32px' }}
          src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png"
        />}
        title="Alipay"
        description="在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。"
      />
    </Card>

  );
}

上面代码应该很容易看懂。

程序运行效果如下：