Ant Design的爬坑之路(一)

最新推荐文章于 2022-10-04 23:22:22 发布

weixin_34252686

最新推荐文章于 2022-10-04 23:22:22 发布

阅读量203

点赞数

文章标签：网络 javascript webpack ViewUI

原文链接：https://juejin.im/post/5b77fb7ee51d4538c021d426

版权

`antd`的安装以及`webpack`的`antd`按需引入配置

注：本篇文章笔者主要讲一下基于React官方脚手架创建项目后，如何按需引入antd，和如何使用antd的定制主题，仅限于使用层面，本系列文章适合初涉antd的使用者。

安装`antd`

使用create-react-app脚手架创建项目
通过yarn add antd安装antd(mac本需要在前面加sudo)

`antd`的按需引入

按照官方文档引入组件

import React from 'react';
import ReactDOM from 'react-dom';
import { LocaleProvider, DatePicker, message } from 'antd';
// 由于 antd 组件的默认文案是英文，所以需要修改为中文
import zhCN from 'antd/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('zh-cn');

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: '',
    };
  }
  handleChange(date) {
    message.info('您选择的日期是: ' + (date ? date.toString() : ''));
    this.setState({ date });
  }
  render() {
    return (
      <LocaleProvider locale={zhCN}>
        <div style={{ width: 400, margin: '100px auto' }}>
          <DatePicker onChange={value => this.handleChange(value)} />
          <div style={{ marginTop: 20 }}>当前日期：{this.state.date && this.state.date.toString()}</div>
        </div>
      </LocaleProvider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
复制代码

不难发现我们的页面中并没有把antd的样式引入，此时聪明的你一定会想到在页面中直接把antd的样式引入

即插入import 'antd/dist/antd.css'，但是这样引入的话我们是不是就把一些没用到的样式也引入了呢？

那么有没有方法让我们不用加这一行代码，直接在引入组件的时候就把样式带上呢？并且还仅仅引入了我们用到的样式呢？当然答案是肯定的，话不多说，我们直接上干货

如何配置

通过yarn add less less-loader安装less与less-loader(less与less-loader我就不做过多的解释了)
通过yarn add babel-plugin-import 安装babel-plugin-import
通过yarn eject 暴露出webpack的配置文件
在config文件夹下的webpack.config.dev.js和webpack.config.prod.js文件中配置less
配置antd的样式按需引入
删除我们插入的import 'antd/dist/antd.css，重启我们的项目，你一定会发现页面上会报下图所示的错误
我们重新安装less，注意：此时我们不要安装最新版本，通过yarn add less@2.7.3安装2.7.3版本的less
成功后重启我们的项目，此时时刻你就会发现页面上已经成功引入了antd的样式。