Question

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

我想使用此日期选择器：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>

Answer 1

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

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

工作演示：

＆＃13;

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"
    };
  }
});

＆＃13;

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

＆＃13;

作为旁注，请考虑开始使用webpack环境进行开发（您可以使用随时可用的模板：https://github.com/vuejs-templates/webpack-simple）。最初需要花费精力学习npm和一些命令行使用，但从长远来看它是值得的：它将允许你使用单个文件组件，更容易插件导入（一些插件可能不准备通过{{1包含）因为它是你正在使用的那个）和其他优点。

如何使用外部vue npm组件

1 个答案: