Flask模板中使用Vue、ant-design-vue、@ant-design/icons-vue示例模板

mengyoufengyu2025-09-25 13:31

1. 直接使用vue

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 Example</title>
    <script src="https://unpkg.com/vue@3.5.21/dist/vue.runtime.global.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <p>{{ message2 }}</p>
</div>

<!-- 初始化 Vue 实例 -->
<script>
    // 创建一个新的 Vue 实例
    const app = Vue.createApp({
        data() {
            return {
                message: '1. Hello Vue 3!',
                message2: '2. Hello, Vue 3!'
            }
        }
    });

    // 将 Vue 实例挂载到 #app 元素上
    app.mount('#app');
</script>
</body>
</html>

2. 使用ant-design-vue（UMD方式）

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在 HTML 中使用 Ant Design Vue</title>
    <link href="{[ url_for('static', filename='favicon.ico')]}" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="https://unpkg.com/ant-design-vue@4.2.6/dist/reset.css">
    </script><script src="https://unpkg.com/vue@3.5.21/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/dayjs@1.11.18/dayjs.min.js"></script>
    <script src="https://unpkg.com/dayjs@1.11.18/plugin/customParseFormat.js"></script>
    <script src="https://unpkg.com/dayjs@1.11.18/plugin/weekday.js"></script>
    <script src="https://unpkg.com/dayjs@1.11.18/plugin/localeData.js"></script>
    <script src="https://unpkg.com/dayjs@1.11.18/plugin/weekOfYear.js"></script>
    <script src="https://unpkg.com/dayjs@1.11.18/plugin/weekYear.js"></script>
    <script src="https://unpkg.com/dayjs@1.11.18/plugin/advancedFormat.js"></script>
    <script src="https://unpkg.com/dayjs@1.11.18/plugin/quarterOfYear.js"></script>
    <script src="https://unpkg.com/ant-design-vue@4.2.6/dist/antd.js"></script>

</head>
<body>

<div id="app">
    <a-button type="primary" @click="showMessage">{{ message }}</a-button>
    <a-input placeholder="请输入..." style="width: 200px; margin-left: 10px;"></a-input>

    <!-- 1. 按钮内置图标 -->
    <div style="margin-bottom: 20px;">
        <a-button type="primary" icon="search" style="margin-right: 10px;">搜索</a-button>
        <a-button type="default" icon="plus" style="margin-right: 10px;">添加</a-button>
        <a-button type="dashed" icon="edit" style="margin-right: 10px;">编辑</a-button>
        <a-button type="text" icon="delete">删除</a-button>
    </div>


</div>
<script>
    const {createApp} = Vue; // 从全局 Vue 对象中解构 createApp
    const {Button, Input, message} = antd; // 从全局 antd 对象中解构你需要的组件。注意：图标注册方式见下文。

    const app = createApp({
        // 你的 Vue 应用选项，例如 data, methods 等
        data() {
            return {
                message: '你好，Ant Design Vue！'
            };
        },
        methods: {
            showMessage() {
                // 使用 antd 的 message 组件
                message.info('这是一个消息提示！');
            }
        }
    });

    // 全局使用 Ant Design Vue
    //app.use(antd); // 这会注册所有 antd 组件

    // 单独注册按钮组件（如果不想全局注册所有组件，可以像这样按需注册）
    app.component(Button.name, Button);
    app.component(Input.name, Input);

    app.mount('#app');
</script>
</body>
</html>

3. 使用ant-design-vue（ESM方式）

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在 HTML 中使用 Ant Design Vue</title>
    <link href="{[ url_for('static', filename='favicon.ico')]}" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="https://unpkg.com/ant-design-vue@4.2.6/dist/reset.css">

    <!-- 定义模块映射 -->
    </script><script type="importmap">
        {
            "imports": {
                "vue": "https://unpkg.com/vue@3.5.21/dist/vue.esm-browser.js",
                "antdVueJsEsm": "https://unpkg.com/ant-design-vue@4.2.6/dist/antd.esm.js"
            }
        }
    </script>

</head>
<body>

<div id="app">
    <a-button type="primary" @click="showMessage">{{ message }}</a-button>
    <a-input placeholder="请输入..." style="width: 200px; margin-left: 10px;"></a-input>

    <!-- 1. 按钮内置图标 -->
    <div style="margin-bottom: 20px;">
        <a-button type="primary" icon="search" style="margin-right: 10px;">搜索</a-button>
        <a-button type="default" icon="plus" style="margin-right: 10px;">添加</a-button>
        <a-button type="dashed" icon="edit" style="margin-right: 10px;">编辑</a-button>
        <a-button type="text" icon="delete">删除</a-button>
    </div>


</div>
<script type="module">
    import {createApp} from "vue"; // 从全局 Vue 对象中解构 createApp
    import {Button, Input, message} from "antdVueJsEsm"; // 从全局 antd 对象中解构你需要的组件。注意：图标注册方式见下文。

    const app = createApp({
        // 你的 Vue 应用选项，例如 data, methods 等
        data() {
            return {
                message: '你好，Ant Design Vue！'
            };
        },
        methods: {
            showMessage() {
                // 使用 antd 的 message 组件
                message.info('这是一个消息提示！');
            }
        }
    });

    // 全局使用 Ant Design Vue
    //app.use(antd); // 这会注册所有 antd 组件

    // 单独注册按钮组件（如果不想全局注册所有组件，可以像这样按需注册）
    app.component(Button.name, Button);
    app.component(Input.name, Input);

    app.mount('#app');
</script>
</body>
</html>

4. 使用@ant-design/icons-vue（UMD方式）

umd使用的是上篇文章生成umd文件，官网上的是cjs格式的。

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ant Design Icons Vue 7.0.1 稳定示例</title>

    <link href="/static/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="https://unpkg.com/ant-design-vue@4.2.6/dist/reset.css">
    <script src="https://unpkg.com/vue@3.5.21/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/dayjs@1.11.18/dayjs.min.js"></script>
    <script src="https://unpkg.com/dayjs@1.11.18/plugin/customParseFormat.js"></script>
    <script src="https://unpkg.com/dayjs@1.11.18/plugin/weekday.js"></script>
    <script src="https://unpkg.com/dayjs@1.11.18/plugin/localeData.js"></script>
    <script src="https://unpkg.com/dayjs@1.11.18/plugin/weekOfYear.js"></script>
    <script src="https://unpkg.com/dayjs@1.11.18/plugin/weekYear.js"></script>
    <script src="https://unpkg.com/dayjs@1.11.18/plugin/advancedFormat.js"></script>
    <script src="https://unpkg.com/dayjs@1.11.18/plugin/quarterOfYear.js"></script>
    <script src="https://unpkg.com/ant-design-vue@4.2.6/dist/antd.js"></script>

    <script src="/component_libs/@ant-design/icons-vue@7.0.1/lib/ant-design-icons-vue.umd.js"></script>
</head>
<body style="padding: 40px; background: #f5f5f5;">
<div id="app">
    <h2 style="margin-bottom: 20px;">✅ 所有依赖加载正常</h2>

    <!-- 图标单独使用 -->
    <div style="margin-bottom: 20px;">
        <AudioTwoTone style="margin-right: 10px; color: #1890ff;"></AudioTwoTone>
        <UserOutlined style="margin-right: 10px; font-size: 20px;"></UserOutlined>
        <HeartFilled style="color: #ff4d4f;"></HeartFilled>
    </div>

    <!-- 图标结合 AntD 按钮使用 -->
    <div>
        <a-button type="primary">
            <SearchOutlined></SearchOutlined>
            搜索
        </a-button>
        <a-button type="default" shape="circle">
            <CheckOutlined/>
        </a-button>

        <a-button type="default" style="margin-left: 10px;">
            <PlusOutlined></PlusOutlined>
            添加
        </a-button>
        <a-button type="danger" style="margin-left: 10px;">删除
            <DeleteOutlined></DeleteOutlined>
        </a-button>
    </div>
</div>
<!-- 3. 使用 type="module-shim" 导入 CJS 模块 -->
<script>
    // 从全局变量中获取需要的资源
    const {createApp} = Vue
    const {Button: AButton} = antd
    const {
        SearchOutlined,
        CheckOutlined,
        UserOutlined,
        ExclamationOutlined,
        DeleteOutlined,
        SyncOutlined
    } = AntDesignIconsVue;

    // 创建应用并注册组件
    app = createApp({
        components: {
            AButton // 注册Button组件
        },
        data() {
            return {
                // 将图标暴露给模板使用
                SearchOutlined,
                CheckOutlined,
                UserOutlined,
                ExclamationOutlined,
                DeleteOutlined,
                SyncOutlined
            }
        }
    });
    for (const [name, component] of Object.entries(AntDesignIconsVue)) {
        app.component(name.toLowerCase(), component);
    }
    //app.component(Button.name, Button);
    app.mount('#app');
</script>

<style>
    /* 调整图标与文字的间距（可选） */
    .ant-btn .anticon {
        margin-right: 4px;
    }
</style>
</body>
</html>

5. 使用@ant-design/icons-vue（ESM方式）

ESM使用的是上篇文章生成ESM文件，官网上的是cjs格式的。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ant Design Icons Vue 7.0.1 ESM方式稳定示例</title>
    <script type="importmap">
        {
            "imports": {
                "vue": "https://unpkg.com/vue@3.5.21/dist/vue.esm-browser.js",
                "antdVueJsEsm": "https://unpkg.com/ant-design-vue@4.2.6/dist/antd.esm.js",
                "ant-design-icons-vue": "/component_libs/@ant-design/icons-vue@7.0.1/lib/ant-design-icons-vue.esm.js"
            }
        }
    </script>
</head>
<body>

<div id="app">
    <h2 style="margin-bottom: 20px;">✅ 所有依赖加载正常</h2>

    <!-- 图标单独使用 -->
    <div style="margin-bottom: 20px;">
        <AudioTwoTone style="margin-right: 10px; color: #1890ff;"></AudioTwoTone>
        <UserOutlined style="margin-right: 10px; font-size: 20px;"></UserOutlined>
        <HeartFilled style="color: #ff4d4f;"></HeartFilled>
    </div>

    <!-- 图标结合 AntD 按钮使用 -->
    <div>
        <a-button type="primary">
            <SearchOutlined></SearchOutlined>
            搜索
        </a-button>
        <a-button type="default" shape="circle">
            <CheckOutlined/>
        </a-button>

        <a-button type="default" style="margin-left: 10px;">
            <PlusOutlined></PlusOutlined>
            添加
        </a-button>
        <a-button type="danger" style="margin-left: 10px;">删除
            <DeleteOutlined></DeleteOutlined>
        </a-button>
    </div>
</div>
<script type="module">
    import {createApp} from "vue"; // 从全局 Vue 对象中解构 createApp
    import {Button} from "antdVueJsEsm"; // 从全局 antd 对象中解构你需要的组件。注意：图标注册方式见下文。
    import AntDesignIconsVue from "ant-design-icons-vue";

    // 创建应用并注册组件
    const app = createApp({});

    for (const [name, component] of Object.entries(AntDesignIconsVue)) {
        app.component(name.toLowerCase(), component);
    }

    app.component(Button.name, Button);
    app.mount('#app');
</script>

</body>

</html>

完毕， OK！！！

相关推荐
浪潮行舟2 小时前
WebGIS：在 Vue 2 项目中使用 Mapbox 时，如果需要加载的 GIS 数据量过大，怎么让接口一次性获取的geojson数据分批加载
前端·javascript·vue.js
hhzz3 小时前
Pythoner 的Flask项目实践-添加Shapefile面数据并展示功能Mapboxgl底图
flask·gis·mapboxgl·pyton·shpfile
Q_Q19632884753 小时前
python+django/flask二手物品交易系统 二手商品发布 分类浏览 在线沟通与订单管理系统java+nodejs
java·spring boot·python·django·flask·node.js·php
小闫BI设源码3 小时前
Python Flask快速入门
开发语言·python·flask
小高0074 小时前
💥写完watchEffect就下班？小心组件半夜给你“暴雷”！
前端·javascript·vue.js
懒大王、4 小时前
视频元素在富文本编辑器中的光标问题
前端·vue.js
OEC小胖胖4 小时前
SEO 优化：元数据 (Metadata) API 和站点地图 (Sitemap) 生成
前端·javascript·前端框架·html·web·next.js
533_5 小时前
[cesium] vue3 安装cesium方法
前端·vue.js
热门推荐
01UV 工具安装与国内镜像源配置指南02GitHub 镜像站点03Spec-Kit 使用指南04UV安装并设置国内源0546个Nano-banana 精选提示词，持续更新中062025年华为杯研赛数学建模竞赛C题完整参考论文 （含模型、MATLAB和Python代码）07保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）08KGG转MP3工具|非KGM文件|解密音频09Linux下V2Ray安装配置指南10jdk21下载、安装（Windows、Linux、macOS）