标签：介绍 设计 import 蚂蚁金服 star opera 一个 src 适应
零、介绍：
Ant design，是阿里巴巴的蚂蚁金服公司设计的一套适应用于web端和移动端网页的Ui组件库，组件好看，非常适合React框架使用。
官网：https://ant.design/index-cn
一、第一步：安装包
引包：cnpm i -S antd
二、全局引用、其实都不这么用，因为需要引用的文件太大，影响性能、所以这里忽略。
三、按需加载、想用什么组件就引入什么组件
1.安装依赖：两个包
cnpm i -D react-app-rewired customize-cra
2.把pakage.json文件的scripts的react-scripts替换成react-app-rewired
1 /* package.json */ 2 "scripts": { 3 - "start": "react-scripts start",//原来 4 + "start": "react-app-rewired start",//修改 5 - "build": "react-scripts build", 6 + "build": "react-app-rewired build", 7 - "test": "react-scripts test", 8 + "test": "react-app-rewired test", 9 }
3.安装插件 cnpm i -S babel-plugin-import
4.在项目根目录创建一个 config-overrides.js 用于修改默认配置。
1 const { override, fixBabelImports } = require(‘customize-cra‘); 2 3 module.exports = override( 4 fixBabelImports(‘import‘, { 5 libraryName: ‘antd‘, 6 libraryDirectory: ‘es‘, 7 style: ‘css‘, 8 }), 9 );
四、使用
1 import React, { Component } from ‘react‘ 2 import { Button } from ‘antd‘; //单独引用 3 4 export default class About extends Component { 5 render() { 6 return ( 7 <div> 8 关于 9 {/* 使用按钮组件 */} 10 <Button type="primary">Primary</Button> 11 </div> 12 ) 13 } 14 }
五、页面效果
标签：介绍 设计 import 蚂蚁金服 star opera 一个 src 适应
原文地址：https://www.cnblogs.com/dmyxs/p/12183310.html
