React 是目前非常火的一个用于构建用户界面的 JavaScript 库, 它使创建交互式 UI 变得轻而易举. Antd 是蚂蚁金服推出的基于 Ant Design 设计体系的 UI 组件库, 主要用于研发企业级中后台产品. Antd 提供的组件不仅简约大气, 而且功能强悍, 还支持自定义主题, 暗黑模式, 数十个国际化语言等, 提供了 React,vue,Angular 等多种实现方式. 接下来我将详细讲解在 React 脚手架中如何配置 Antd.
1. 环境
node.JS
一款编辑器 (VS code,IDEA,webStrom 等)
2. 创建项目
在项目文件目录下打开 cmd 命令行, 使用 NPM install -g create-react-App 命令全局安装 create-react-App 脚手架工具 (安装一次后不用再次安装).
运行 create-react-App my-Web 命令 (my-Web 为自己的项目名称), 创建自己的项目. 这个过程会下载很多依赖, 如果下载速度很慢, 可以先终止此次操作, 运行 NPM config set registry https://registry.npm.taobao.org / 命令, 将 NPM 换成国内的淘宝源. 出现下面的信息就是项目创建成功了.
项目创建成功. PNG
由于我安装了 yarn, 所以提示是如何使用 yarn 启动, 构建项目, 正常的话应该是显示 NPM start 等.
3. 安装 Antd
现在项目已经创建好了, 用我们的 IDE 打开这个项目. 在 IDE 的终端里输入 NPM install antd --save 或 yarn add antd 命令安装 Antd 框架.
安装 antd.PNG
至此, 就可以使用 Antd 写一些非常漂亮的页面了. 但是, 如果你还想自己配置主题的话, 那吗还需要一些操作才能完成.
4. 高级配置
在终端里运行 NPM install react-App-rewired customize-cra --save 或 yarn add react-App-rewired customize-cra 命令. 这两个库是对 create-react-App 进行自定义配置的社区解决方案. 安装成功之后, 修改 package.JSON 里的启动配置如下:
- "scripts":{
- "start":"react-app-rewired start",
- "build":"react-app-rewired build",
- "test":"react-app-rewired test",
- "eject": "react-app-rewired eject"
- }
然后运行 NPM install babel-plugin-import Less Less-loader@5 或 yarn add babel-plugin-import Less Less-loader@5. 其中, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件, Less 和 Less-loader 则是用于自定义主题的框架.
特别注意: Less-loader@5 千万不要少了后面的 "@5", 否则会默认安装最新的第 6 版, 而这会导致修改主题后, 出现项目编译失败的错误.
编译出错. PNG
然后在项目的根目录下创建一个 config-overrides.JS 用于修改默认配置.
- const {
- override,
- fixBabelImports,
- addLessLoader
- } = require('customize-cra');
- module.exports = override(
- // 针对 antd 实现按需打包: 根据 import 来打包 (使用 babel-plugin-import)
- fixBabelImports('import',{
- libraryName:'antd',
- libraryDirectory:'es',
- style:true,// 自动打包相关的样式 默认为 style:'CSS'
- }),
- // 使用 Less-loader 对源码重的 Less 的变量进行重新制定, 设置 antd 自定义主题
- addLessLoader({
- javascriptEnabled: true,
- // 将默认的主题色修改为绿色, 其余的颜色变量可前往 antd 官网查询
- modifyVars:{'@primary-color':'#1DA57A'},
- }),
- );
到这里我们的配置就全部结束了, 我们可以开始写代码看一下效果了.
5. 运行
在 App.JS 里, 将默认的代码修改如下:
- import React from 'react';
- import ReactDOM from 'react-dom';
- import {Button} from 'antd';
- class App extends Component {
- render() {
- return (
- <div align="center">
Hello Antd! 下面是一个 Button.<br/>
- <Button type="primary"> 按钮 </Button>
- </div>
- )
- }
- }
运行 NPM start 或 yarn start 命令启动项目, 出现下面这样一个绿色的按钮就证明我们的配置成功了!
运行结果. PNG
6. 总结
最初按照官网的步骤配置主题, 一直出现 Failed to compile 的错误, 经过多次摸索之后才发现, 可能是最新的 Less-loader 导致的问题, 于是将版本改回 5.0.0 才正常运行. 因此, 希望大家特别注意这一点.
来源: http://www.jianshu.com/p/a98c92b8d8e1