前言
- 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添加。(这步很重要，特别坑)
- 添加一个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.完成
