我是 Vue.js 的新手，目前正在尝试在现有解决方案中使用它。
我不可能使用 .vue 文件。它是一个独立的系统，不使用 webpack。我需要本地文件才能使其正常工作。在下面的例子中，我在线使用了.js。
我想使用这个日期选择器：https://github.com/mengxiong10/vue2-datepicker https://github.com/mengxiong10/vue2-datepicker
我的问题是日期选择器未呈现。
我不知道如何注册该组件。
我试图在下面的一个简单的独立示例中隔离我想要做的事情。
我想了解如何注册外部组件。我尝试了很多方法，需要帮助。
我希望有人有知识和时间来帮助我。
提前致谢！
这是我所做的：
<!DOCTYPE html>
<html>
<head>
<title>Vue test</title>
</head>
<body>
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-datepicker"></script>
<div id="app">
<input type="text" v-model="Data.SomeText" />
<date-picker v-model="Data.SomeDate"></date-picker>
</div>
<script>
var vm = new Vue({
el: '#app',
data: { Data: '' },
components: {
'date-picker': DatePicker
},
created: function () {
this.Data = {"SomeText":"Hey","SomeDate":"2017-12-24T00:00:00"};
}
});
</script>
</body>
</html>
The vue2-datepicker脚本包装在 CommonJS 模块中，该模块具有默认导出。为了访问它，您必须指定您正在访问默认导出：
components: {
'date-picker': DatePicker.default
},
工作演示：
var vm = new Vue({
el: '#app',
data: {
Data: ''
},
components: {
'date-picker': DatePicker.default
},
created: function() {
this.Data = {
"SomeText": "Hey",
"SomeDate": "2017-12-24T00:00:00"
};
}
});
<script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-datepicker"></script>
<body>
<div id="app">
<date-picker v-model="Data.SomeDate"></date-picker>
</div>
</body>
作为旁注，考虑开始使用 webpack 环境进行开发（您可以使用现成的模板：https://github.com/vuejs-templates/webpack-simple https://github.com/vuejs-templates/webpack-simple）。最初学习 npm 和一些命令行用法需要付出努力，但从长远来看这是值得的：它将允许您使用单文件组件，更容易导入插件（某些插件可能不准备通过<script>因为它是您正在使用的）和其他优点。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
