Ant Design 的 DatePicker 是 React 组件，不能直接在纯 HTML 中使用；需运行于 React 环境，否则报错如 “React is not defined”；Vue 项目须用 ant-design-vue 并正确引入、注册。
Ant Design 不能直接在纯 HTML 中用 DatePicker 这类组件
它不是原生 HTML 标签，也不是 jQuery 插件——antd 是 React 生态的 UI 库，必须运行在 React 环境中。你往 <head> 里加个 CSS 和 JS 文件，然后写个 <DatePicker />，浏览器会直接报错：React is not defined 或 antd is not defined。
常见错误现象：
- 页面空白，控制台报
ReferenceError: React is not defined - 组件渲染成文字字符串，比如显示为
[object Object] - 样式加载了但交互失效（没 React 实例接管）
Vue 场景下要用 ant-design-vue，不是 antd
如果你用的是 Vue（尤其是 Vue 3），必须引入 ant-design-vue，而不是官方 React 版本的 antd。两者 API 相似但不兼容，混用会导致 Cannot resolve component DatePicker 或 defineComponent is not a function。
关键区别：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
ant-design-vue的 CDN 地址是类似https://cdn.bootcdn.net/ajax/libs/ant-design-vue/4.0.0/antd.min.js，不是antd@4.x - Vue 3 需要全局注册组件或使用
app.use(antd)，不能靠解构const { DatePicker } = antd - Vue 模板中写法是
<a-date-picker @change="onDateChange" />，不是 JSX 的<DatePicker onChange={...} />
CDN 方式快速启动 Vue + ant-design-vue 的最小可行结构
以下代码能跑通，无需构建工具，适合临时页面、原型或嵌入已有系统：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue + Ant Design Vue</title>
<link href="https://cdn.bootcdn.net/ajax/libs/ant-design-vue/4.0.0/antd.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<a-date-picker v-model:value="date" format="YYYY-MM-DD" />
<p>选中的日期：{{ date?.format('YYYY-MM-DD') }}</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ant-design-vue/4.0.0/antd.min.js"></script>
<script>
const { createApp, ref } = Vue;
const { DatePicker } = antDesignVue;
createApp({
setup() {
const date = ref(null);
return { date };
}
})
.use(antDesignVue)
.mount('#app');
</script>
</body>
</html>
注意点：
-
ant-design-vue@4.0.0要求 Vue 3.3+，低版本 Vue 3 可能触发getCurrentInstance is undefined -
v-model:value是 Vue 3 的写法；Vue 2 用v-model即可，但需配ant-design-vue@1.x - 如果控制台报
moment is not defined，说明用了旧版格式（如YYYY-MM-DD HH:mm:ss），新版默认用 dayjs，需显式传value-format或改用dayjs格式
CSS 加载顺序和样式覆盖问题很实际
即使 JS 正常运行，<a-button> 也可能看起来像普通按钮——不是代码错了，是样式没生效。根本原因常是：
- CDN 的 CSS 链接被放在
<body>底部，或晚于其他 CSS 加载，导致被覆盖 - 你写了
.ant-btn { background: red !important; }，但ant-design-vue内部用的是 CSS-in-JS 或 scoped style，你的规则压根没命中 - 主题变量（如
@primary-color）完全不起作用，因为 CDN 版本不支持动态主题切换
建议做法：
- CSS
<link>必须放在<head>最顶部，且早于任何自定义样式 - 覆盖样式优先用
:deep(.ant-btn)（Vue 3 SFC）或.ant-btn:not(.my-custom-btn)这类更具体的选择器 - 需要换主题？别折腾 CDN，直接上 vite + unocss 或构建时配置主题变量
最易被忽略的一点：ant-design-vue 的组件内部依赖 dayjs 和 vue 的响应式系统，但 CDN 不自动处理这些 peer deps。你看到 date.format is not a function，往往不是日期组件坏了，而是 dayjs 没加载或没正确绑定到组件上下文。
