当前位置：首页 > 行业动态 > 正文

如何通过CDN方式高效引入Ant Design组件库？

admin
行业动态
2025-01-18
2352

要通过 cdn方式引入antd，可以在html文件的部分添加以下代码：，“ html，，“，这样即可在页面中使用antd组件。

使用CDN方式引入Ant Design

Ant Design（antd）是一个由阿里巴巴开发的企业级React UI组件库，广泛应用于前端开发中，尽管Ant Design是为React设计的，但通过引入React和ReactDOM，可以在原生JS项目中使用这些组件，本文将详细介绍如何在原生JS项目中通过CDN方式引入Ant Design，并展示如何初始化组件、配置和自定义主题、以及如何使用生命周期钩子。

如何通过CDN方式高效引入Ant Design组件库？第1张

一、引入CDN

在原生JS项目中使用Ant Design的第一步是通过CDN引入必要的CSS和JS文件，通过CDN引入，可以简化安装和配置过程，以下是具体的步骤：

1、引入Ant Design CSS：在HTML文件的<head>部分引入Ant Design的CSS文件。

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.16.13/antd.min.css">

2、引入React和ReactDOM：在HTML文件的底部引入React和ReactDOM的CDN链接。

   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

3、引入Ant Design JS：继续在HTML文件的底部引入Ant Design的JS文件。

   <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.16.13/antd.min.js"></script>

二、初始化组件

在原生JS项目中使用Ant Design组件，需要使用React和ReactDOM来渲染这些组件，你可以在JavaScript文件中编写React代码，并使用ReactDOM将其挂载到HTML中的某个DOM节点上，以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ant Design with Vanilla JS</title>
    <!-引入Ant Design CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.16.13/antd.min.css">
</head>
<body>
    <!-你的HTML内容 -->
    <div id="root"></div>
    <!-引入React和ReactDOM -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <!-引入Ant Design JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.16.13/antd.min.js"></script>
    <!-你的JavaScript代码 -->
    <script type="text/babel">
        const { Button } = antd;
        const { useState } = React;
        function App() {
            const [count, setCount] = useState(0);
            return (
                <div>
                    <Button type="primary" onClick={() => setCount(count + 1)}>
                        Click me! Count: {count}
                    </Button>
                </div>
            );
        }
        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>

三、配置和自定义主题

Ant Design提供了丰富的主题配置选项，你可以通过配置来定制组件的样式，你可以通过修改Less变量来实现自定义主题。

1、引入Less：需要引入Less编译器来支持自定义主题。

   <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.13.1/less.min.js"></script>

2、创建自定义主题：创建一个Less文件来定义自定义主题变量。

   <style type="text/less">
       @import (less) "https://cdnjs.cloudflare.com/ajax/libs/antd/4.16.13/antd.less";
       @primary-color: #1DA57A;
   </style>

3、编译Less：使用Less编译器编译自定义主题。

   <script>
       less.modifyVars({
           '@primary-color': '#1DA57A'
       });
   </script>

四、使用生命周期钩子

在使用React组件时，了解React的生命周期钩子非常重要，通过生命周期钩子，你可以在组件的不同阶段执行特定的操作，以下是一些常见的生命周期钩子：

1、componentDidMount：组件挂载后调用。

2、componentDidUpdate：组件更新后调用。

3、componentWillUnmount：组件卸载前调用。

以下是一个使用生命周期钩子的示例：

<script type="text/babel">
    const { Button } = antd;
    const { useState, useEffect } = React;
    function App() {
        const [count, setCount] = useState(0);
        useEffect(() => {
            console.log('Component did mount');
            return () => {
                console.log('Component will unmount');
            };
        }, []);
        useEffect(() => {
            console.log('Component did update');
        }, [count]);
        return (
            <div>
                <Button type="primary" onClick={() => setCount(count + 1)}>
                    Click me! Count: {count}
                </Button>
            </div>
        );
    }
    ReactDOM.render(<App />, document.getElementById('root'));
</script>

五、归纳

通过以上步骤，你可以在原生JS项目中成功使用Ant Design组件，尽管Ant Design是为React设计的，但通过引入React和ReactDOM，可以方便地在原生JS项目中使用这些组件，你还可以通过配置和自定义主题来满足项目的特定需求，希望这篇文章对你有所帮助！

常见问题解答（FAQs）

Q1: 如何在原生JS项目中通过CDN方式引入Ant Design？

A1: 要在原生JS项目中通过CDN方式引入Ant Design，首先需要在HTML文件的<head>部分引入Ant Design的CSS文件，然后在HTML文件的底部引入React、ReactDOM和Ant Design的JS文件，具体步骤如下：

1、引入Ant Design CSS：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.16.13/antd.min.css">

2、引入React和ReactDOM：<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> 和<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

3、引入Ant Design JS：<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.16.13/antd.min.js"></script>

Q2: 如何在原生JS项目中使用Ant Design的生命周期钩子？

A2: 在原生JS项目中使用Ant Design的生命周期钩子，可以通过React的生命周期方法实现，常见的生命周期钩子包括componentDidMount、componentDidUpdate和componentWillUnmount，下面是一个示例代码：

<script type="text/babel">
    const { Button } = antd;
    const { useState, useEffect } = React;
    function App() {
        const [count, setCount] = useState(0);
        useEffect(() => {
            console.log('Component did mount');
            return () => {
                console.log('Component will unmount');
            };
        }, []);
        useEffect(() => {
            console.log('Component did update');
        }, [count]);
        return (
            <div>
                <Button type="primary" onClick={() => setCount(count + 1)}>
                    Click me! Count: {count}
                </Button>
            </div>
        );
    }
    ReactDOM.render(<App />, document.getElementById('root'));
</script>