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

相关推荐
Irene199113 分钟前
在 Vue 中使用 TypeScript 的几种方式
vue.js·typescript
hhcccchh1 小时前
学习vue第八天 Vue3 模板语法和内置指令 - 简单入门
前端·vue.js·学习
yyf198905251 小时前
Vue 框架相关中文文献
前端·javascript·vue.js
粥里有勺糖1 小时前
开发一个美观的 VitePress 图片预览插件
前端·vue.js·vitepress
鹏多多2 小时前
jsx/tsx使用cssModule和typescript-plugin-css-modules
前端·vue.js·react.js
Cherry的跨界思维2 小时前
【AI测试全栈：Vue核心】22、从零到一：Vue3+ECharts构建企业级AI测试可视化仪表盘项目实战
vue.js·人工智能·echarts·vue3·ai全栈·测试全栈·ai测试全栈
ssshooter3 小时前
复古话题：Vue2 的空格间距切换到 Vite 后消失了
前端·vue.js·面试
小贵子的博客3 小时前
Ant Design Vue ＜a-table＞
前端·javascript·vue.js·anti-design-vue
奋斗吧程序媛4 小时前
vue3 Study(1)
前端·javascript·vue.js
神秘的猪头4 小时前
🎨 CSS 这种“烂大街”的技术，怎么在 React 和 Vue 里玩出花来？—— 模块化 CSS 深度避坑指南
css·vue.js·react.js
热门推荐
01GitHub 镜像站点02Labelme从安装到标注：零基础完整指南03安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）04Linux下V2Ray安装配置指南05jdk21下载、安装（Windows、Linux、macOS）06【踩坑笔记】50系显卡适配的 PyTorch 安装07Opencode CLI 安装成功,但是启动失败08手把手教你通过Gemini3 pro 学生认证，白用一年，手慢无！09全球最强模型Grok4，国内已可免费使用！（附教程）10Claude Code Plan 模式完全指南：从入门到精通