将Vue组件插入到HTML甚至.blade（Laravel）文件中。

huangapple
go评论100阅读模式
英文:

Inserting vue component into Html or even .blade (Laravel) files

问题

I'm a backend developer who knows a little bit of jQuery, and I'm struggling to insert a VUE 3 datepicker into an HTML page.
我是一个后端开发人员，了解一些jQuery，但我在将VUE 3日期选择器插入HTML页面时遇到了困难。

I understand that I would need to study frontend development more deeply, but at the moment, I can't afford to start from scratch to understand how this implementation works.
我明白我需要更深入地学习前端开发，但目前我无法从头开始了解这个实现是如何工作的。

I would like to use this component: vue3datepicker.com within an HTML file.
我想在HTML文件中使用这个组件：vue3datepicker.com。

I have read the component's documentation, asked in the GPT chat, in some forums I participate in, and searched relentlessly on Google and DuckDuckGo for how to implement third-party components in "static" HTML, but so far, none of the answers have helped me understand how to implement it.
我已经阅读了组件的文档，在GPT聊天中询问了，在一些我参与的论坛上询问了，并在Google和DuckDuckGo上不断搜索如何在“静态”HTML中实现第三方组件，但到目前为止，没有一个答案帮助我理解如何实现它。

In the section https://vue3datepicker.com/installation/, they mention some installation examples, but I'm more lost than a blind person in a shooting.
在https://vue3datepicker.com/installation/部分，他们提到了一些安装示例，但我比一个盲人在射击中还要迷失。

If I add the CDN, do I necessarily need to use the import for something else? (i still don't understand well npm and build steps)
如果我添加CDN，是否必须使用import导入其他内容？（我仍然不太理解npm和构建步骤）

I will leave an example of the code I tried to do here, but it is giving me an error:
我会在这里留下我尝试做的代码示例，但它给了我一个错误：

Vue warn: Failed to resolve component: vuedatepicker
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at

Vue warn: Property "date" was accessed during render but is not defined on instance.
at

Vue警告：无法解析组件：vuedatepicker
如果这是一个本地自定义元素，请确保通过compilerOptions.isCustomElement将其从组件解析中排除。
在中。

Vue警告：在渲染期间访问了属性“date”，但在实例上未定义。
在中。

  1. <!doctype html>
  2. <html lang="en">
  4. <head>
  5.   <title>Title</title>
  6.   <!-- Required meta tags -->
  7.   <meta charset="utf-8">
  8.   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  10.   <!-- Bootstrap CSS v5.2.1 -->
  11.   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
  12.     integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  14.     <script src="https://unpkg.com/vue@latest"></script>
  15.     <script src="https://unpkg.com/@vuepic/vue-datepicker@latest"></script>
  16.     <link rel="stylesheet" href="https://unpkg.com/@vuepic/vue-datepicker@latest/dist/main.css">
  18. </head>
  20. <body>
  21.   <header>
  22.     <!-- place navbar here -->
  23.   </header>
  24.   <main>
  26.     <div id="app">
  27.         <template>
  28.             <VueDatePicker v-model="date"></VueDatePicker>
  29.           </template>
  30.     </div>
  31.       
  32.   </main>
  33.   <footer>
  34.     <!-- place footer here -->
  35.   </footer>
  38. </body>
  40. <script>
  41.     const app = Vue.createApp({
  42.         components: { Datepicker: VueDatePicker },
  43.     }).mount("#app");
  44. </script>
  46. </html>

Here some examples working in official doc https://vue3datepicker.com/props/modes-configuration/
这里有一些在官方文档中工作的示例https://vue3datepicker.com/props/modes-configuration/。

英文:

I'm a backend developer who knows a little bit of jQuery, and I'm struggling to insert a VUE 3 datepicker into an HTML page.
I understand that I would need to study frontend development more deeply, but at the moment, I can't afford to start from scratch to understand how this implementation works.

I would like to use this component: vue3datepicker.com within an HTML file.

I have read the component's documentation, asked in the GPT chat, in some forums I participate in, and searched relentlessly on Google and DuckDuckGo for how to implement third-party components in "static" HTML, but so far, none of the answers have helped me understand how to implement it.

In the section https://vue3datepicker.com/installation/, they mention some installation examples, but I'm more lost than a blind person in a shooting.

If I add the CDN, do I necessarily need to use the import for something else? (i still don't understand well npm and build steps)

I will leave an example of the code I tried to do here, but it is giving me an error:

Vue warn: Failed to resolve component: vuedatepicker
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at &lt;App&gt;

Vue warn: Property "date" was accessed during render but is not defined on instance.
at &lt;App&gt;

  1. &lt;!doctype html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  4. &lt;head&gt;
  5.   &lt;title&gt;Title&lt;/title&gt;
  6.   &lt;!-- Required meta tags --&gt;
  7.   &lt;meta charset=&quot;utf-8&quot;&gt;
  8.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
  10.   &lt;!-- Bootstrap CSS v5.2.1 --&gt;
  11.   &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;
  12.     integrity=&quot;sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT&quot; crossorigin=&quot;anonymous&quot;&gt;
  14.     &lt;script src=&quot;https://unpkg.com/vue@latest&quot;&gt;&lt;/script&gt;
  15.     &lt;script src=&quot;https://unpkg.com/@vuepic/vue-datepicker@latest&quot;&gt;&lt;/script&gt;
  16.     &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/@vuepic/vue-datepicker@latest/dist/main.css&quot;&gt;
  18. &lt;/head&gt;
  20. &lt;body&gt;
  21.   &lt;header&gt;
  22.     &lt;!-- place navbar here --&gt;
  23.   &lt;/header&gt;
  24.   &lt;main&gt;
  26.     &lt;div id=&quot;app&quot;&gt;
  27.         &lt;template&gt;
  28.             &lt;VueDatePicker v-model=&quot;date&quot;&gt;&lt;/VueDatePicker&gt;
  29.           &lt;/template&gt;
  30.     &lt;/div&gt;
  31.       
  32.   &lt;/main&gt;
  33.   &lt;footer&gt;
  34.     &lt;!-- place footer here --&gt;
  35.   &lt;/footer&gt;
  38. &lt;/body&gt;
  40. &lt;script&gt;
  41.     const app = Vue.createApp({
  42.         components: { Datepicker: VueDatePicker },
  43.     }).mount(&quot;#app&quot;);
  44. &lt;/script&gt;
  46. &lt;/html&gt;

Here some examples working in oficial doc https://vue3datepicker.com/props/modes-configuration/

答案1

得分: 1

在上面的代码片段中，您不需要使用模板标签，而是需要调用Datepicker而不是VueDatePicker。纠正后的代码如下：

  1. <!doctype html>
  2. <html lang="en">
  4. <head>
  5.   <title>Title</title>
  6.   <!-- Required meta tags -->
  7.   <meta charset="utf-8">
  8.   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  10.   <!-- Bootstrap CSS v5.2.1 -->
  11.   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
  12.     integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  14.   <script src="https://unpkg.com/vue@latest"></script>
  15.   <script src="https://unpkg.com/@vuepic/vue-datepicker@latest"></script>
  16.   <link rel="stylesheet" href="https://unpkg.com/@vuepic/vue-datepicker@latest/dist/main.css">
  18. </head>
  20. <body>
  21.   <header>
  22.     <!-- place navbar here -->
  23.   </header>
  24.   <main>
  26.     <div id="app">
  27.       <Datepicker v-model="date"></Datepicker>
  28.     </div>
  30.   </main>
  31.   <footer>
  32.     <!-- place footer here -->
  33.   </footer>
  34. </body>
  35. </html>

请注意，上面的代码已进行了修正，不再使用模板标签，并使用了Datepicker而不是VueDatePicker。

英文:

In the above code snippet you don't need the template tag and you have to call Datepicker instead of VueDatePicker. Code after correction:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const app = Vue.createApp({
  2.         components: { Datepicker: VueDatePicker },
  3.         data() {
  4.         return {
  5.          date: &#39;&#39;
  6.         }
  7.        }
  8.     }).mount(&quot;#app&quot;);

<!-- language: lang-html -->

  1. &lt;!doctype html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  4. &lt;head&gt;
  5.   &lt;title&gt;Title&lt;/title&gt;
  6.   &lt;!-- Required meta tags --&gt;
  7.   &lt;meta charset=&quot;utf-8&quot;&gt;
  8.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
  10.   &lt;!-- Bootstrap CSS v5.2.1 --&gt;
  11.   &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;
  12.     integrity=&quot;sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT&quot; crossorigin=&quot;anonymous&quot;&gt;
  14.     &lt;script src=&quot;https://unpkg.com/vue@latest&quot;&gt;&lt;/script&gt;
  15.     &lt;script src=&quot;https://unpkg.com/@vuepic/vue-datepicker@latest&quot;&gt;&lt;/script&gt;
  16.     &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/@vuepic/vue-datepicker@latest/dist/main.css&quot;&gt;
  18. &lt;/head&gt;
  20. &lt;body&gt;
  21.   &lt;header&gt;
  22.     &lt;!-- place navbar here --&gt;
  23.   &lt;/header&gt;
  24.   &lt;main&gt;
  26.     &lt;div id=&quot;app&quot;&gt;
  27.         &lt;Datepicker v-model=&quot;date&quot;&gt;&lt;/Datepicker&gt;
  28.     &lt;/div&gt;
  30.   &lt;/main&gt;
  31.   &lt;footer&gt;
  32.     &lt;!-- place footer here --&gt;
  33.   &lt;/footer&gt;
  34. &lt;/body&gt;

</html>

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月11日 14:15:06
  • 转载请务必保留本文链接：https://go.coder-hub.com/76659150.html
  • datepicker
  • javascript
  • laravel
  • laravel-blade
  • vue.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定