Ant Design上手的一些坑

Posted on Edited on In

转载请注明出处WangYuheng’s Blog

前因

一直在找样式模板，始终不太满意，看到了http://ant.design 封装了一系列的react模块控件，样式和动画效果也不错，觉得这就是自己想要的，兴冲冲的上手。但在使用过程中遇到了一些小坑，本文意在让和我一样的小白用户能够顺利开始使用Ant Design

环境准备

安装nodejs

一些脚手架工具都是基于nodejs环境开发，所以需要现在本机安装nodejs环境。可在 nodejs官网 下载对应系统的nodejs安装文件。现在nodejs有两个分支

  1. 长期支持版LTS(推荐)
  2. 最新版

本文基于最新的LTS版本v4.5.0 LTS

升级npm

npm是nodejs附带的一个包管理工具，需要使用npm安装antd，但是附带的npm版本可能过低，导致出现依赖问题。所以安装完nodejs之后，就将npm升级到最新版本

npm -v
npm install -g npm
npm -v

切换镜像仓库

如果npm下载速度过慢，可以用淘宝封装的npm镜像仓库替换

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后就可以使用cnpm命令替换npm

安装antd

安装的坑一般都在环境准备上，antd的安装及使用过程在官网有着详细介绍 http://ant.design/docs/react/getting-started

以下为简单的记录自己的安装过程。

安装脚手架

npm install antd-init -g

创建项目

mkdir antd-demo && cd antd-demo
antd-init --type plain-react

执行antd-init时，需要下载依赖，可能需要一段时间等待

启动项目

npm start

启动后，可以通过 http://localhost:8989 查看效果。在修改antd-demo中的文件后，不需要刷新，即可查看效果。

感悟

很喜欢react的模块化思想，antd提供的样式组件及动画，给个人的开发工作提供了极大的便利。通过查看Ant Design中对组件的封装过程，也是一个学习和理解react的过程。