antd mysql_从零开始创建一个React(Umi+AntD)项目

介绍

Umi

整合常用组件、插件的前端应用框架。开箱即用，有封装好的布局可以直接应用。

AntD

丰富的组件库。

初始化环境与代码

本文以 Ubuntu 18.04 为例

初始化 Node 环境

Umi3 要求安装 NodeJS 10.13+

下载 NodeJS 压缩包：

解压到 /usr/local/lib/ 目录下(或其他目录，则自行修改下面命令中的路径)：

可能需要管理员权限，添加 sudo

软连接执行命令：

可能需要管理员权限，添加 sudo

验证配置完成：

输出版本信息表示 NodeJS 安装成功。

初始化 Umi 项目

创建并进入项目文件夹：

初始化 Umi 项目：

会在文件夹中生成 package.json 等文件，Umi 项目的依赖、启动命令等都已配置完成。

安装 node 依赖：

启动服务：

通过 http://localhost:8000 (具体端口参考实际启动后的提示) 访问项目初始页面：

安装 Umi UI 工具

Umi UI 支持在网页上为应用添加现成的模版、启停前端服务等功能。

安装：

修改 .umirc.ts 文件，启用 dva 与 antd:

再次启动项目即可看到网页右下角出现一个图标，点开即可开始探索 Umi UI。

使用 Umi UI 创建一个模版页面

打开 Umi UI，选择一个模版添加到项目中：

自定义配置，例如配置新页面的路由与代码文件位置：

确定后访问 http://localhost:8000/apps 即可看到这个没写一行代码创建好的页面。

接下来，修改代码来增删改对应的组件与配置即可！