美文网首页
React项目模板-antd的使用

React项目模板-antd的使用

作者: stevekeol | 来源:发表于2019-05-03 16:03 被阅读0次

antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。提供开箱即用的高质量 React 组件。

//安装
npm install antd --save

一、初步使用

//该步骤尚未采用-start
//1. 首先使用使用 (babel-plugin-import)在.babelrc 或 babel-loader option中配置:
{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css" // `style: true` 会加载 less 文件
    }]
  ]
}
//该步骤尚未采用-end
//从 antd 引入模块(以DatePicker为例)
import { DatePicker } from 'antd';
//引入样式
import 'antd/dist/antd.css';
//使用组件
<DatePicker />
//为了webpack能够对相应的模块合并,并提供相应的有序正常执行的环境,需要增加对应的loader;
//根目录下webpack.config.js中的module添加规则:对以.scss或.css结尾的文件,一次进行loader处理;
  module: {
    rules: [
      {
        test: /\.s?css$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader']
      } 
  ]
}
日期组件效果图.jpg

相关文章

网友评论

      本文标题:React项目模板-antd的使用

      本文链接:https://www.haomeiwen.com/subject/ohtwnqtx.html