如何使用外部vue npm组件
如何使用外部vue npm组件
提问于 2018-01-07 20:21:35
我是Vue.js的新手，目前正在尝试在现有的解决方案中使用它。我不可能使用.vue文件。这是一个独立的系统，不使用webpack。我需要本地的文件才能正常工作。在下面的示例中，我使用了..js的online。
我想使用这个数据报警器：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>Stack Overflow用户
回答已采纳
发布于 2018-01-07 22:05:20
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/vue@2.5.13/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)。最初需要学习npm和一些命令行的用法，但从长远来看，这是值得的:它将允许您使用单个文件组件、更容易的插件导入(一些插件可能不准备通过<script>包含，因为它是您正在使用的插件)和其他优点。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48141191
复制相关文章
相似问题
腾讯云开发者
