美文网首页
React整合Ant Design Landing

React整合Ant Design Landing

作者: 板栗炖牛肉 | 来源:发表于2021-02-19 17:47 被阅读0次

前言

  • 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添加。(这步很重要,特别坑)

  1. 添加一个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.完成

相关文章

网友评论

      本文标题:React整合Ant Design Landing

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