Ant Design Landing 项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00574/article/details/141836186

Ant Design Landing 项目教程

ant-design-landing:mountain_bicyclist: Landing Pages of Ant Design System项目地址:https://gitcode.com/gh_mirrors/ant/ant-design-landing

1、项目介绍

Ant Design Landing 是一个由 Ant Motion 构建的模板项目，提供了丰富的首页模板。用户可以下载模板代码包并快速使用，或者使用编辑器快速构建自己的专属页面。该项目支持响应式模板，拥有多种页面模板供下载，并提供多样化的模块，用户可以灵活配置所需的页面模板。

2、项目快速启动

安装

首先，克隆项目到本地：

git clone https://github.com/ant-design/ant-design-landing.git

进入项目目录：

cd ant-design-landing

安装依赖：

npm install

启动项目

运行以下命令启动开发服务器：

npm start

项目将在 http://localhost:3000 启动，你可以在这里预览和编辑你的页面。

3、应用案例和最佳实践

Ant Design Landing 可以用于构建各种类型的 landing page，包括产品介绍页、活动宣传页等。以下是一个简单的应用案例：

产品介绍页

使用 Ant Design Landing 提供的模板，你可以快速构建一个产品介绍页。例如，选择一个响应式模板，然后根据产品特点进行个性化修改。

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Row, Col, Button } from 'antd';

const App = () => (
  <div className="App">
    <Row justify="center" align="middle" style={{ height: '100vh' }}>
      <Col>
        <h1>产品名称</h1>
        <p>产品简介</p>
        <Button type="primary">了解更多</Button>
      </Col>
    </Row>
  </div>
);

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