React + antd 搭建项目

Posted 2022-02-17 前端e站

1.快速构建

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

npm install -g create-react-app // 构建react环境

yarn add create-react-app // yarn构建（推荐使用）

create-react-app my-app // 构建my-app

cd my-app // 切换到my-app

npm start // npm方式运行选择

yarn start // yarn方式运行选择

2.antd引入 

 1.使用 npm 或 yarn 安装

npm install antd --save // npm方式安装

yarn add antd // yarn方式安装

2. 示例

 app.js文件修改，查看示例效果

import  DatePicker  from 'antd'; // 引入模块

import 'antd/dist/antd.css'; // 引入样式

function App () 
  return (
    <div className='App'>
        <DatePicker />  // 引用DatePicker
    </div>
  )


export default App

3.按需加载 （babel-plugin-import）

npm install babel-plugin-import npm 方式

yarn add babel-plugin-import yarn 方式

// 配置

  "plugins": [
    ["import", 
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css" // `style: true` 会加载 less 文件
    ]
  ]

 只需从 antd 引入模块即可，无需单独引入样式。

import  DatePicker  from 'antd'; // 引入模块

// import 'antd/dist/antd.css'; // 可以注释

 4.手动引入

import DatePicker from 'antd/es/date-picker'; // 加载 JS

import 'antd/es/date-picker/style/css'; // 加载 CSS

// import 'antd/es/date-picker/style';         // 加载 LESS

3.项目初始化配置

根目录新建文件config-overrides.js,下载customize-cra修饰器

const  override, fixBabelImports  = require('customize-cra')
// 上面按需加载配置
module.exports = override(
  fixBabelImports('import', 
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css'
  )
)