在create-react-app中使用Ant Design Landing模板的完整指南

前言

Ant Design Landing 是一套基于Ant Design的高质量落地页模板集合，可以帮助开发者快速构建专业的企业官网、产品介绍页等场景。本文将详细介绍如何在create-react-app创建的项目中集成Ant Design Landing模板。

准备工作

创建React应用

首先确保你已经安装了Node.js环境，然后通过以下命令创建一个新的React应用：

npx create-react-app my-landing-page
cd my-landing-page

这会生成一个标准的React项目结构：

├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

集成Ant Design Landing模板

添加模板文件

1. 从Ant Design Landing中选择并下载你需要的模板
2. 将模板文件夹（通常命名为Home）复制到项目的src目录下

项目结构将变为：

├── src
│   ├── Home
│   │    ├── less
│   │    ├── index.js
│   │    ├── ...
│   ├── App.css
│   ├── App.js
│   ├── ...

安装必要依赖

Ant Design Landing需要一些额外的依赖：

npm install antd @ant-design/icons rc-queue-anim rc-scroll-anim

配置Less支持

由于Ant Design使用Less作为样式预处理器，我们需要配置项目支持Less：

npm install react-app-rewired customize-cra less less-loader --save-dev

修改项目配置

1. 修改package.json中的scripts部分：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

2. 在项目根目录创建config-overrides.js文件：

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: { '@primary-color': '#1DA57A' },
    }
  }),
);

修改入口文件

更新src/index.js以使用我们的Landing模板：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './Home';  // 修改这里
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

启动项目

完成上述配置后，运行以下命令启动开发服务器：

npm start

现在你应该能在浏览器中看到Ant Design Landing模板的效果了。

进阶配置：添加路由支持

如果你的项目需要多页面，可以按照以下步骤添加路由功能。

安装路由依赖

npm install react-router-dom --save

配置基础路由

修改App.js文件：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
import { enquireScreen } from 'enquire-js';
import Header from './Home/Nav0';
import Footer from './Home/Footer0';
import Home from './Home';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { isMobile: false };
  }
  
  componentDidMount() {
    enquireScreen((b) => {
      this.setState({ isMobile: !!b });
    });
  }
  
  render() {
    return (
      <Router>
        <div>
          <Header isMobile={this.state.isMobile} />
          <Route exact path="/" component={Home} />
          <Footer isMobile={this.state.isMobile} />
        </div>
      </Router>
    );
  }
}

export default App;

添加新页面

1. 下载另一个Ant Design Landing模板，重命名为Page2并放入src目录
2. 更新App.js添加新路由：

import Page2 from './Page2';

// 在Router中添加
<Route exact path="/page2" component={Page2} />

3. 修改导航组件以支持路由链接：

import { Link } from "react-router-dom";

// 替换原有的<a>标签
<Link to={navData[key].a.href}>
  {navData[key].a.children}
</Link>

4. 更新导航数据源data.source.js：

export const Nav00DataSource = {
  Menu: {
    children: [
      { name: 'item0', a: { children: '首页', href: '/' } },
      { name: 'item1', a: { children: '产品介绍', href: '/page2' } },
    ],
  },
};

常见问题解答

样式不生效怎么办？

1. 确保已正确安装所有依赖
2. 检查config-overrides.js配置是否正确
3. 确认Less文件导入路径正确

移动端适配问题

Ant Design Landing内置了响应式设计，但如果你需要特别处理移动端，可以使用enquireScreen方法：

enquireScreen((b) => {
  this.setState({ isMobile: b });
});

性能优化建议

1. 按需加载页面组件
2. 生产环境构建时使用代码分割
3. 考虑使用React.lazy进行懒加载

结语

通过本文的指导，你应该已经成功在create-react-app项目中集成了Ant Design Landing模板，并实现了基本的路由功能。这套模板提供了丰富的组件和设计风格，可以大大提升你的开发效率，帮助你快速构建专业的落地页面。

在实际项目中，你还可以根据需要进一步定制样式、添加动画效果或集成后端API，打造更加完善的网站体验。