ant框架怎么引用js

在Ant框架中引用JS的步骤：

在Ant框架中引用JS的步骤有：使用<script>标签、利用Webpack打包工具、使用Ant Design提供的JS功能。 其中，使用<script>标签是最直观和简单的方法，适合初学者和小型项目。下面我们详细描述这一点：

在Ant框架中，可以直接在HTML文件中通过<script>标签引用外部JavaScript文件。这种方式非常适合快速开发和调试，尤其是在你想要临时引入一些外部的JS库时。具体方法如下：

在HTML文件中添加引用：

你可以在HTML文件的<head>或<body>标签中使用<script>标签来引用外部的JavaScript文件。通常，我们建议将<script>标签放在<body>的末尾，以确保页面内容先加载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ant Design Example</title>
    <!-- 引入Ant Design的CSS文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.16.13/antd.min.css">
</head>
<body>
    <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>
    <!-- 引入你自己的JS文件 -->
    <script src="path/to/your/script.js"></script>
</body>
</html>

在JS文件中使用Ant Design组件：

在你自己的JS文件中，你可以直接使用Ant Design的组件和功能。例如：

// script.js
const { Button } = antd;
class App extends React.Component {
    render() {
        return (
            <div>
                <Button type="primary">Ant Design Button</Button>
            </div>
        );
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

这种方式虽然简单，但是不适合大型项目，因为它不利于模块化管理和代码优化。对于更复杂的项目，建议使用Webpack等打包工具来管理和引用JS文件。

一、使用Webpack打包工具

在使用Ant Design开发较大型应用时，Webpack是非常重要的工具。Webpack可以帮助我们管理依赖、优化代码并提高应用性能。

1. 安装Webpack和相关依赖

首先，你需要在项目中安装Webpack和相关的依赖包：

npm install webpack webpack-cli --save-dev npm install react react-dom antd --save

2. 配置Webpack

创建一个webpack.config.js文件来配置Webpack：

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react']
                    }
                }
            },
            {
                test: /.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    resolve: {
        alias: {
            'antd': path.resolve(__dirname, 'node_modules/antd')
        }
    }
};

3. 创建React组件

在src目录下创建一个index.js文件，并编写React组件：

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'antd';
import 'antd/dist/antd.css';
class App extends React.Component {
    render() {
        return (
            <div>
                <Button type="primary">Ant Design Button</Button>
            </div>
        );
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

4. 构建项目

在package.json中添加构建脚本：

"scripts": {
    "build": "webpack --mode production"
}

运行构建命令：

npm run build

Webpack会将项目打包到dist目录中，你可以在HTML文件中引用bundle.js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ant Design Example</title>
</head>
<body>
    <div id="root"></div>
    <script src="dist/bundle.js"></script>
</body>
</html>

二、使用Ant Design提供的JS功能

Ant Design不仅提供了丰富的UI组件，还提供了很多实用的JS功能，比如消息提示、模态框等。你可以直接在React组件中使用这些功能。

1. 消息提示

你可以使用Ant Design的message模块来显示全局的消息提示：

import React from 'react';
import ReactDOM from 'react-dom';
import { Button, message } from 'antd';
import 'antd/dist/antd.css';
class App extends React.Component {
    handleClick = () => {
        message.success('This is a success message');
    };
    render() {
        return (
            <div>
                <Button type="primary" onClick={this.handleClick}>Show Message</Button>
            </div>
        );
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

2. 模态框

你可以使用Ant Design的Modal模块来显示模态框：

import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Modal } from 'antd';
import 'antd/dist/antd.css';
class App extends React.Component {
    state = { visible: false };
    showModal = () => {
        this.setState({ visible: true });
    };
    handleOk = () => {
        this.setState({ visible: false });
    };
    handleCancel = () => {
        this.setState({ visible: false });
    };
    render() {
        return (
            <div>
                <Button type="primary" onClick={this.showModal}>Show Modal</Button>
                <Modal
                    title="Basic Modal"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <p>Some contents...</p>
                </Modal>
            </div>
        );
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

通过以上介绍，你可以根据项目的实际情况选择合适的方法来引用JS文件。对于大型项目，推荐使用Webpack等打包工具，以便更好地管理和优化代码。如果你需要使用项目团队管理系统，可以考虑使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们可以帮助你更好地进行项目管理和协作。