Javascript 如何使用外部vue npm组件_Javascript_Vue.js_Vue Component

Javascript 如何使用外部vue npm组件

javascript vue.js

Javascript 如何使用外部vue npm组件,javascript,vue.js,vue-component,Javascript,Vue.js,Vue Component,我是Vue.js的新手，目前正在尝试在现有解决方案中使用它。我无法使用.vue文件。这是一个独立的系统，不使用webpack。我需要本地的文件才能正常工作。在下面的示例中，我使用了.js的联机我想使用此日期选择器：我的问题是没有呈现日期选择器我不知道如何注册组件。我已经尝试在下面一个简单的独立示例中分离出我想要做的事情我想了解，如何注册外部组件。我尝试了很多方法，需要帮助。我希望有人有知识和时间来帮助我提前谢谢以下是我的工作： <!DOCTYPE html> <

我是Vue.js的新手，目前正在尝试在现有解决方案中使用它。我无法使用.vue文件。这是一个独立的系统，不使用webpack。我需要本地的文件才能正常工作。在下面的示例中，我使用了.js的联机

我想使用此日期选择器：

我的问题是没有呈现日期选择器

我不知道如何注册组件。我已经尝试在下面一个简单的独立示例中分离出我想要做的事情

我想了解，如何注册外部组件。我尝试了很多方法，需要帮助。我希望有人有知识和时间来帮助我

提前谢谢

以下是我的工作：

<!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>


Vue测试
var vm=新的Vue({
el:“#应用程序”，
数据：{数据：'}，
组成部分：{
“日期选择器”：日期选择器
},
已创建：函数（）{
this.Data={“SomeText”：“嘿”，“SomeDate”：“2017-12-24T00:00:00”}；
}
});

vue2 datepicker脚本封装在CommonJS模块中，该模块具有默认导出。要访问它，您必须指定您正在访问默认导出：

components: {
  'date-picker': DatePicker.default
},

工作演示：

var vm=new Vue({
el:“#应用程序”，
数据：{
数据：“”
},
组成部分：{
“日期选择器”：DatePicker.default
},
已创建：函数（）{
此参数。数据={
“SomeText”：“嘿”，
“SomeDate”：“2017-12-24T00:00:00”
};
}
});
完美。感谢您的解决方案和建议。我会看看它是否适合这个架构！