在HTML中使用Ant Design Vue时遇import语法错误求助

问题原因 #

1. 未声明为模块的<script>标签中使用了ES模块的import语法，浏览器不允许这种用法；
2. 已通过<script src="antd.min.js">全局引入Ant Design Vue，组件会挂载到全局antd对象上，无需再用import导入；
3. Vue 3全局模式下，需通过Vue.createApp创建应用实例并挂载，而非使用export default的组件选项格式；
4. <template>标签不能直接放在<body>中，需作为Vue应用的模板内容。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/ant-design-vue@4.0.3/dist/reset.css">
    <script src="https://unpkg.com/vue@3.3.4/dist/vue.global.js"></script>
    <script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
    <script src="https://unpkg.com/ant-design-vue@4.0.3/dist/antd.min.js"></script>
    <title>My first ant design vue page</title>
</head>
<body>
    <!-- Vue应用挂载容器 -->
    <div id="app">
        <a-button>Add</a-button>
    </div>

    <script>
        // 初始化dayjs插件（保障日期组件正常工作）
        dayjs.extend(window.dayjs_plugin_customParseFormat)
        dayjs.extend(window.dayjs_plugin_weekday)
        dayjs.extend(window.dayjs_plugin_localeData)
        dayjs.extend(window.dayjs_plugin_weekOfYear)
        dayjs.extend(window.dayjs_plugin_weekYear)
        dayjs.extend(window.dayjs_plugin_advancedFormat)
        dayjs.extend(window.dayjs_plugin_quarterOfYear)

        // 创建Vue应用实例
        const app = Vue.createApp({})

        // 全局注册所有Ant Design Vue组件，注册后可直接在模板使用组件标签
        app.use(antd)

        // 将应用挂载到指定容器
        app.mount('#app')
    </script>
</body>
</html>

关键修改说明 #

• 移除import和export default代码，改用全局变量antd和Vue操作；
• 添加挂载容器<div id="app">，将组件内容放入其中；
• 通过app.use(antd)全局注册Ant Design Vue组件，无需手动单个注册即可使用<a-button>这类标签；
• 初始化dayjs所有插件，避免日期相关组件功能异常。

如果只想注册单个组件而非全局注册，可修改为以下写法：

const app = Vue.createApp({
    components: {
        AButton: antd.Button
    }
})
app.mount('#app')

此时模板中仍可使用<a-button>标签，Vue会自动将注册的驼峰组件名转换为短横线格式。

内容的提问来源于stack exchange，提问作者Omid