英文:
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”，但在实例上未定义。
在
<!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>
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 <App>
Vue warn: Property "date" was accessed during render but is not defined on instance.
at <App>
<!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>
Here some examples working in oficial doc https://vue3datepicker.com/props/modes-configuration/
答案1
得分: 1
在上面的代码片段中，您不需要使用模板标签，而是需要调用Datepicker而不是VueDatePicker。纠正后的代码如下：
<!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">
<Datepicker v-model="date"></Datepicker>
</div>
</main>
<footer>
<!-- place footer here -->
</footer>
</body>
</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 -->
const app = Vue.createApp({
components: { Datepicker: VueDatePicker },
data() {
return {
date: ''
}
}
}).mount("#app");
<!-- language: lang-html -->
<!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">
<Datepicker v-model="date"></Datepicker>
</div>
</main>
<footer>
<!-- place footer here -->
</footer>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论