使用Vue Hotel Datepicker组件报错：Failed to mount component: template/render函数未定义

Let's walk through what's causing this error and fix it up quickly:

1. You've got a broken template tag #

First off, your closing tag for the datepicker is totally malformed. </<HotelDatePicker> isn't valid HTML—you either use a self-closing tag like <HotelDatePicker/> or a properly paired closing tag like <HotelDatePicker></HotelDatePicker>. Vue gets tripped up by invalid template syntax, which is probably contributing to the render function error.

2. Component registration might be off #

When you load the UMD version of the datepicker via a <script> tag, it attaches the component to the global window object. Your current code tries to register HotelDatePicker locally, but if Vue can't find that variable in scope, it throws the error you're seeing.

Corrected Code #

Here's the fixed version of your index.html with explanations of the changes:

<html>
<head>
  <!-- Double-check that your Vue.js path points to the actual file -->
  <script src="path/to/vue.js"></script>
  <!-- Make sure this path is correct too—if you're using a CDN, replace it with the CDN URL -->
  <script src="vue-hotel-datepicker/dist/vue-hotel-datepicker.min.js"></script>
</head>
<body>
<div id="app">
  <!-- Using kebab-case for the component tag is Vue's recommended convention -->
  <hotel-date-picker></hotel-date-picker>
</div>
<script>
new Vue({
  el: '#app',
  components: {
    // Explicitly reference the global component from window
    HotelDatePicker: window.HotelDatePicker
  }
})
</script>
</body>
</html>

Key Fixes: #

• Valid Template: Replaced the broken closing tag with a properly formatted one, using kebab-case (Vue converts PascalCase component names to kebab-case in templates automatically).
• Global Component Reference: Added window.HotelDatePicker to tell Vue exactly where to find the component. Alternatively, you could even remove the components option entirely—the UMD build usually registers the component globally, so Vue will pick it up without local registration.
• Cleaner Structure: Moved scripts to the <head> (you could also put them right before </body>—just make sure Vue loads before the datepicker script).

One last thing: Double-check that your script paths are correct! If Vue or the datepicker script isn't loading properly, you'll get the same error.

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