Flask模板中使用Vue、ant-design-vue、@ant-design/icons-vue示例模板
1. 直接使用vue
<!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方式）
<!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 对象中解构 createAppconst {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方式）
<!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 对象中解构 createAppimport {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格式的。
<!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} = Vueconst {Button: AButton} = antdconst {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格式的。
<!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 对象中解构 createAppimport {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>