React整合Ant Design Landing

前言

• Ant Design Landing 怎么说了，可以说一个好的封面吧，这么理解
• 刚开始弄肯定踩了很多坑
• 目标环境 webstorm、CRA、eject后的（重点，官网文档是没有eject的）
• 官方文档，可以先看一下大概，但是在less上有很多坑

• 成品截图

  
  image.png

解决方案

1.先重开一个CRA项目，不演示

2.强调一点。我这个项目打开了eject没有使用 react-app-rewired,customize-cra。不打开eject的看官网走

3.添加依赖，注意antd我没有按需加载，可以自己后面配置，不影响，为了简洁走流程

# npm i less less-loader   //less依赖

# npm i antd enquire-js rc-queue-anim rc-scroll-anim rc-tween-one   //其他相关依赖，没要的都剔除了(注意必须要antd，其他依然要)

# npm install rc-banner-anim      // 如果用的是多屏滑动型的 banner，加上这条;

# npm install @ant-design/compatible   // 如果使用了 Content7 模块，请加上这条;

4.加入less。这里重点，要开启less的javascriptEnabled，看我这篇专门添加Less的文章 less添加。(这步很重要，特别坑)

5. 添加一个js ----> data.source.js ，下载的Home,模版编辑器，放入

|── ...
|── Home                     //首页、模版文件夹
|── data.source.js          # 内容数据文件，这里添加（原Home有data.source，可以使用原本的，这文件可忽略不放，放了自行配置）
|── index.js                # 主入口
|── App.js                  # 内容模块
|── ...

image.png

其内容

import React from 'react';
export const Banner00DataSource = {
    OverPack: { replay: true, playScale: [0.3, 0.1], className: 'banner0' },
    textWrapper: { className: 'banner0-text-wrapper' },
    title: {
        className: 'banner0-title',
        children: (
            <span>
        <img
            width="100%"
            src="https://zos.alipayobjects.com/rmsportal/HqnZZjBjWRbjyMr.png"
            alt="img"
        />
      </span>
        ),
    },
    content: { className: 'banner0-content', children: '一个高效的页面动画解决方案' },
    button: { className: 'banner0-button', children: 'Learn More' },
};

6.打开index.js,修改如下

import React from 'react';
import ReactDOM from 'react-dom';
import './index.less';
import App from './Home';   //import App from './App';  修改
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

7.运行,成功。但是样式变形，又是一个坑。方案

#index.jsx中引入antd样式
import 'antd/dist/antd.css';

8.完成