在HTML/Laravel Blade中集成Vue3 Datepicker遇阻，求解决方案

关于CDN引入的疑问 #

引入CDN后不需要额外的import操作，CDN会将Vue和日期选择器组件直接挂载到全局环境中，无需npm或构建工具即可使用。

你遇到的两个错误修复 #

• 组件未识别错误：你注册组件时用了Datepicker作为名称，但模板里写的是<VueDatePicker>，两者不匹配；CDN引入后组件已全局注册，无需手动局部注册。
• date属性未定义错误：Vue实例中没有声明date这个响应式数据，v-model绑定的数据必须在实例的data选项中定义。

修复后的完整代码 #

<!doctype html>
<html lang="en">

<head>
  <title>Vue3 Datepicker Demo</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS v5.2.1 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

  <!-- Vue 3 CDN -->
  <script src="https://unpkg.com/vue@latest"></script>
  <!-- Vue3 Datepicker CDN及样式 -->
  <script src="https://unpkg.com/@vuepic/vue-datepicker@latest"></script>
  <link rel="stylesheet" href="https://unpkg.com/@vuepic/vue-datepicker@latest/dist/main.css">

</head>

<body>
  <main>
    <div id="app" class="container mt-5">
      <VueDatePicker v-model="date"></VueDatePicker>
      <p class="mt-3">选中的日期: {{ date }}</p>
    </div>
  </main>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          date: null // 声明v-model绑定的响应式数据
        }
      }
    }).mount("#app");
  </script>
</body>

</html>

官方模式配置示例（中文翻译） #

默认日期模式 #

默认仅显示日期选择面板：

<VueDatePicker v-model="date"></VueDatePicker>

日期时间模式 #

同时支持日期和时间选择，通过mode属性配置：

<VueDatePicker v-model="dateTime" mode="datetime"></VueDatePicker>

仅时间模式 #

仅展示时间选择面板：

<VueDatePicker v-model="time" mode="time"></VueDatePicker>

年月选择模式 #

仅允许选择年份和月份：

<VueDatePicker v-model="monthYear" mode="month"></VueDatePicker>

多日期选择模式 #

开启后可选择多个日期：

<VueDatePicker v-model="multipleDates" multi-date></VueDatePicker>

范围选择模式 #

支持选择日期区间：

<VueDatePicker v-model="dateRange" range></VueDatePicker>

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