ant design入门学习笔记
今天要学习一种新的企业级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−vnode−v node -v npm -v
使用npm安装ant design
$ npm install antd
PS:对于这些提示自己手动下载的
例：npm WARN antd@3.3.3 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不报错为止
- antd@3.3.3
updated 1 package in 12.295s
现在我们就安装好了ant design
入门例子
使用dva cli工具创建一个新项目
下载安装dva-cli工具
首先用npm命令下载这个dva-cli工具
$ npm install dva-cli -g
- dva-cli@0.9.2
updated 1 package in 73.681s
使用dva新建一个项目
$ dva new myapp
+ dva@2.1.0
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组件。
ant design入门学习笔记相关推荐
- 『Material Design 入门学习笔记』前言
写在最前面的话 最开始我在毕业的时候做Android,当时还没到Android5.0,没有Material Design,当时的设计都是以立体仿3d效果为主.后来有了扁平化设计,我却开始了SDK各种功 ...
- Qt 快速入门学习笔记
Qt 快速入门学习笔记 环境安装 环境配置以及安装 安装包下载地址 1.windows安装 msvc编译器模块需要安装Windows软件开发工具包. MinGW是Windows平台使用GNU工具导入库 ...
- 刘海洋 · LaTeX 不快速的入门 学习笔记
刘海洋 · LaTeX 不快速的入门 学习笔记 网址链接 : 刘海洋 · LaTeX 不快速的入门 - 跟着大神学习最纯正的 LaTeX 知识 一.组织文档结构 1. 文档基本结构 以document ...
- Altium Designer入门学习笔记4：PCB设计中各层的含义
Altium Designer入门学习笔记4:PCB设计中各层的含义 阻焊层:solder mask,是指板子上要上绿油的部分:因为它是负片输出,所以实际上有solder mask的部分实际效果并不上 ...
- dubbo入门学习笔记之入门demo(基于普通maven项目)
注:本笔记接dubbo入门学习笔记之环境准备继续记录; (四)开发服务提供者和消费者并让他们在启动时分别向注册中心注册和订阅服务 需求:订单服务中初始化订单功能需要调用用户服务的获取用户信息的接口(订 ...
- Crypto++入门学习笔记（DES、AES、RSA、SHA-256）
Crypto++入门学习笔记(DES.AES.RSA.SHA-256) 背景(只是个人感想,技术上不对后面的内容构成知识性障碍,可以skip): 最近,基于某些原因和需要,笔者需要去了解一下Crypt ...
- 机器学习入门学习笔记：（4.2）SVM的核函数和软间隔
前言 之前讲了有关基本的SVM的数学模型(机器学习入门学习笔记:(4.1)SVM算法).这次主要介绍介绍svm的核函数.软间隔等概念,并进行详细的数学推导.这里仅将自己的笔记记录下来,以便以后复习查看 ...
- 机器学习入门学习笔记：（3.2）ID3决策树程序实现
前言 之前的博客中介绍了决策树算法的原理并进行了数学推导(机器学习入门学习笔记:(3.1)决策树算法).决策树的原理相对简单,决策树算法有:ID3,C4.5,CART等算法.接下来将对ID3决策树算法 ...
- 机器学习入门学习笔记：（2.3）对数几率回归推导
理论推导 在以前的博客(机器学习入门学习笔记:(2.1)线性回归理论推导 )中推导了单元线性回归和多元线性回归的模型. 将线性回归模型简写为:y=ωTx+by = \omega^Tx+b: ...
- 机器学习入门学习笔记：（2.2）线性回归python程序实现
上一篇博客中,推导了线性回归的公式,这次试着编程来实现它.(机器学习入门学习笔记:(2.1)线性回归理论推导 ) 我们求解线性回归的思路有两个:一个是直接套用上一篇博客最后推导出来的公式:另一 ...
最新文章
- java signature 性能_Java常见bean mapper的性能及原理分析
- 建筑物占据的网格数目的确定(三)
- eselasticsearch入门_ElasticSearch入门学习-基础示例(1)
- 来！咱们聊聊如何把缓存玩出一种境界！
- 点云网络的论文理解（六）-Frustum PointNets 总体概括
- 《Oracle Life-DBA的一天》海报下载
- Mybatis在Maven项目中使用
- java 爬虫 图片_java实现爬虫爬取小姐姐图片
- copy 回顾总结:Java中抽象类与抽象方法
- 蓝桥杯-标题：六角填数
- TankGame1.0
- Docker 架构（二）【转】
- LayaAir引擎78款3D射击主题微信小游戏分享，看看玩过几款！
- 非常实用全面的风水知识
- 电子章怎么做（电子公章怎么生成），只要三步
- 华为很快搭载鸿蒙系统,华为高管确认很快将会推出搭载鸿蒙操作系统的智能手表...
- 数据结构【一轮复习】---绪论(王道+天勤)
- Bootstrap导航栏下拉菜单不生效的问题
- coreseek note
- 终于有人把DevOps讲明白了