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！！！

相关推荐
杨超越luckly12 分钟前
HTML应用指南：利用GET请求获取全国沃尔沃门店位置信息
前端·arcgis·html·数据可视化·门店数据
ღ_23332 小时前
vue3二次封装element-plus表格，slot透传，动态slot。
前端·javascript·vue.js
Ashley的成长之路2 小时前
NativeScript-Vue 开发指南:直接使用 Vue构建原生移动应用
前端·javascript·vue.js
朕的剑还未配妥2 小时前
Vue 2 响应式系统常见问题与解决方案（包含_demo以下划线开头命名的变量导致响应式丢失问题）
前端·vue.js
JNU freshman3 小时前
Element Plus组件
前端·vue.js·vue3
软件技术NINI4 小时前
MATLAB疑难诊疗：从调试到优化的全攻略
javascript·css·python·html
Q_Q19632884754 小时前
python+uniapp基于微信小程序的助眠小程序
spring boot·python·小程序·django·flask·uni-app·node.js
长空任鸟飞_阿康4 小时前
在 Vue 3.5 中优雅地集成 wangEditor，并定制“AI 工具”下拉菜单（总结/润色/翻译）
前端·vue.js·人工智能
苏打水com4 小时前
从 HTML/CSS/JS 到 React：前端进阶的平滑过渡指南
前端·javascript·html
JNU freshman5 小时前
vue 技巧与易错
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南07在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）082025软件测试面试八股文（含答案+文档）09XXE 注入漏洞全解析：从原理到实战10两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答