将vue组件插入Html甚至.blade(Laravel)文件

q3qa4bjr 于 2023-08-07 发布在 Vue.js

关注(0)|答案(1)|浏览(137)

我是一名后端开发人员，懂一点jQuery，我正在努力将VUE 3日期选择器插入HTML页面。我知道我需要更深入地研究前端开发，但目前，我不能从头开始理解这个实现是如何工作的。
我想使用这个组件：vue3datepicker.com的HTML文件。
我已经阅读了组件的文档，在GPT聊天中询问，在我参加的一些论坛中，并在Google和DuckDuckGo上不懈地搜索如何在“静态”HTML中实现第三方组件，但到目前为止，没有任何答案可以帮助我理解如何实现它。
在https://vue3datepicker.com/installation/一节中，他们提到了一些安装示例，但我比一个盲人在拍摄中更迷失。
如果我添加了CDN，我是否需要将导入用于其他用途？（我还是不太懂npm和构建步骤）
我将在这里留下一个我试图做的代码的例子，但它给了我一个错误：
Vue警告：无法解析组件：vuedatepicker如果这是一个原生自定义元素，请确保通过compilerOptions.isCustomElement将其从组件解析中排除。在
Vue警告：属性“date”在渲染期间被访问，但未在示例上定义。在

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

<head>
  <title>Title</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">

    <script src="https://unpkg.com/vue@latest"></script>
    <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>
  <header>
    <!-- place navbar here -->
  </header>
  <main>

    <div id="app">
        <template>
            <VueDatePicker v-model="date"></VueDatePicker>
          </template>
    </div>
      
  </main>
  <footer>
    <!-- place footer here -->
  </footer>

</body>

<script>
    const app = Vue.createApp({
        components: { Datepicker: VueDatePicker },
    }).mount("#app");
</script>

</html>

字符串
这里有一些在官方文档https://vue3datepicker.com/props/modes-configuration/中工作的例子

vue.js

来源：https://stackoverflow.com/questions/76659150/inserting-vue-component-into-html-or-even-blade-laravel-files

1条答案

按热度按时间

wvmv3b1j1#

在上面的代码片段中，你不需要模板标签，你必须调用Datepicker而不是VueDatePicker。更正后代码：

const app = Vue.createApp({
        components: { Datepicker: VueDatePicker },
        data() {
        return {
         date: ''
        }
       }
    }).mount("#app");

个字符

赞(0）回复(0）举报 2023-08-07

我来回答

将vue组件插入Html甚至.blade(Laravel)文件

1条答案

相关问题

热门标签

最新问答