ant design入门学习笔记

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cc907566076/article/details/79782662

今天要学习一种新的企业级UI组件——ant design
参考资源https://ant.design/docs/react/introduce

特点

面向Web应用程序的企业级UI设计语言。
开箱即用的一组高品质React组件。
用TypeScript完全定义的类型编写。
整套开发和设计资源和工具。

环境支持

现代浏览器和Internet Explorer 9+（带polyfills）
服务器端渲染
电子

版本

稳定： npm v3.3.3
您可以订阅此提要以获取新版本通知：https：//github.com/ant-design/ant-design/releases.atom

npm

我们使用npm的目的是——安装ant design
我们建议使用npm或纱线进行安装，这不仅使开发更容易，而且还使您能够利用丰富的Javascript包和工具生态系统。

具体了解什么是npm
我摘抄了一点简介：
npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个 包（package） （即，代码模块）。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。
下面是关于 npm 的快速介绍：
npm 由三个独立的部分组成：
网站
注册表（registry）
命令行工具 (CLI)
网站 是开发者查找包（package）、设置参数以及管理 npm 使用体验的主要途径。
注册表 是一个巨大的数据库，保存了每个包（package）的信息。
CLI 通过命令行或终端运行。开发者通过 CLI 与 npm 打交道。
]: npm中文文档 https://www.npmjs.com.cn/
npm官网:https://www.npmjs.com/

下载与安装

可以直接访问这里https://docs.npmjs.com/getting-started/installing-node了解如何安装npm
下载node.js 和npm 地址：（node.js包含了npm）https://nodejs.org/en/download/
这里我下载了windows环境最新版：node-v8.11.1-x64.msi 对应npm版本为5.6.0
（安装步骤[这里是在windows上安装的步骤，至于linux可以自行参阅：https://github.com/creationix/nvm/blob/master/README.md#installation
]参考http://www.runoob.com/nodejs/nodejs-install-setup.html 和 https://www.cnblogs.com/goldlong/p/8027997.html）

基础命令

这里还有一些基础的命令解释：http://www.jb51.net/article/133126.htm，
其中我们等会安装ant design用到的是：–save ：保存配置信息到 package.json文件中。package.json是nodejs项目的配置文件。

检查版本

安装好了以后，检查版本
(要记得设置他们的path环境变量哦，也可以在安装的时候选择第四个：自动设置环境变量)
$node -v$ npm -v

使用npm安装ant design

$ npm install antd

PS:对于这些提示自己手动下载的
例：npm WARN [email protected] requires a peer of react-dom@>=16.0.0 but none is installed. You must install peer dependencies yourself.
统统在这里用npm命令下载下来（例：npm install react-dom ）。。直到安装antd不报错为止

• [email protected]
  updated 1 package in 12.295s

现在我们就安装好了ant design

入门例子

使用dva cli工具创建一个新项目

下载安装dva-cli工具

首先用npm命令下载这个dva-cli工具
$ npm install dva-cli -g

• [email protected]
  updated 1 package in 73.681s

使用dva新建一个项目

$ dva new myapp
+ [email protected]

updated 1 package in 41.681s
npm.cmd install end

Success! Created myapp at D:\cc_study\cc_study\ant_design\myapp.

Inside that directory, you can run several commands:
* npm start: Starts the development server.
* npm run build: Bundles the app into dist for production.
* npm test: Run test.

We suggest that you begin by typing:
cd D:\cc_study\cc_study\ant_design\myapp
npm start

Happy hacking!
以上提示我们创建好了myapp这个小栗子，我们可以npm start运行这个项目

运行这个项目

D:\cc_study\cc_study\ant_design\myapp>npm start

Starting the development server…
Compiled successfully!

You can now view Your App in the browser.

Local: http://localhost:8000/
On Your Network: http://192.168.0.105:8000/

Note that the development build is not optimized.
To create a production build, use npm run build.

访问查看

访问：http://localhost:8000/

使用init cli 工具创建项目

下载安装init-cli工具

npm install antd-init -g

mkdir antd-demo
cd antd-demo

使用init新建一个项目

antd-init
npm install

运行

npm start

访问查看

访问http://localhost:8000/

antd-init@2 仅适用于学习和体验 antd，如果你要开发项目，推荐使用 dva-cli 进行项目初始化。dva 是一个基于 react 和 redux 的轻量应用框架，概念来自 elm，支持 side effects、热替换、动态加载等，已在生产环境广泛应用。
antd-init@2 is only for experience antd. If you want to create projects, it’s better to init with dva-cli. dva is a redux and react based application framework. elm concept, support side effects, hmr, dynamic load and so on.

Usage:

npm install dva-cli -g
dva new myapp
cd myapp
npm start

Visit https://github.com/dvajs/dva to learn more.

根据提示语我们看出他推荐dva方式。

ant design的初衷——前后端分离

例如刚才我们的两个前端例子写好了以后：

最后我们可以：
构建与部署
$ npm run build
入口文件会构建到 dist 目录中，你可以自由部署到不同环境中进行引用。
D:\cc_study\cc_study\ant_design\antd-demo>npm run build

@ build D:\cc_study\cc_study\ant_design\antd-demo
atool-build

Child
Time: 11417ms
Asset Size Chunks Chunk Names
common.js 1.18 kB 0 [emitted] common
index.js 341 kB 1, 0 [emitted] index
index.css 126 kB 1, 0 [emitted] index

可以看见部署后文件夹里面多了个dist文件夹，里面包含了部署后的文件：

然后我们可以吧这些文件放在我们的项目里面引用即可：

demo.jsp中如何引用呢？
antd-demo项目中有一个测试的入口页面：
D:\cc_study\cc_study\ant_design\antd-demo\Index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <link rel="stylesheet" href="index.css" />
</head>
<body>

<div id="root"></div>

<script src="common.js"></script>
<script src="index.js"></script>

</body>
</html>

我们引用的时候照着这个即可

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ant design——前后端分离</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="root"></div>
</body>
</html>

<!-- 引入公用文件 -->
<script src="common.js"></script>
<!-- 引入入口文件 -->
<script src="index.js"></script>

现在我们启动项目，访问此jsp即可：

是不是很方便呢？我们没有加入任何依赖包，全部在本地npm命令中按需加载然后生成了小栗子开发并start测试，最后build部署后的一系列文件，就可以直接拿到项目中使用，非常灵活。而不用像以前一样，吧所有的组件全部复制到项目中。

使用推荐的dva

说是学习antd,其实里面很多语法来自其他地方，antd在其中的table等充作展示组件。

这节我们的目标是快速搭建 dva 项目，并熟悉他的所有概念。

我们的dva工具好啦，而且之前我们也用dva创建了一个小项目环境myapp，那么在开发的时候我们如何开始我们自己需要的东西呢？
参考https://github.com/dvajs/dva-docs/blob/master/v1/zh-cn/getting-started.md
这里可以告诉我们在实现自己的需求的时候，该怎么做。

接到需求之后推荐的做法不是立刻编码，而是先以上帝模式做整体设计。
1.先设计 model
2.再设计 component
3.最后连接 model 和 component

按照链接的小李子一步步实现即可。会有个初步的了解。

今天就到这里吧，已经了解了整个项目大致如何实现，下一文再具体学习一下antd组件。