Question

我有一个使用MVC框架构建的PHP应用程序。在某些页面上，我具有使用vuejs创建的复杂，高度交互的组件。这些组件被编写为单个文件组件，并与webpack捆绑在一起。这真的很好。在html页面的底部，我用如下行加载组件：

<script src="js/my_vue_component"></script>

现在，我想通过临时使用Vue组件来补充这一点。例如，我可能在表单上使用Vue Date Picker组件。在这种情况下，我不希望创建单个文件组件的开销。

解决此问题的最佳方法是什么？ Vue及其第三方程序包是通过NPM管理的。

我尝试按以下方式加载代码：

<script>
    import Vue from "vue";
    import DatePicker from "vuejs-datepicker";
    const date1 = new Vue({
        el: '#respond_by',
        components: {
            'date-picker' : DatePicker
        }
    });
</script>

但是我听到一个错误，说import declarations may only appear at top level of a module。

然后我尝试“要求” vue和vuejs-datepicker，但发现require is not defined。

是否有一种简单的方法可以解决此问题，而不必求助于CDN，还是应该回到单一文件组件上？

Answer 1

阅读：https://vuejs.org/v2/guide/components-registration.html#Local-Registration

在组件脚本标签内：

<template>
    <div>
        <date-picker></date-picker>
    </div>
</template>

<script>
import DatePicker from "vuejs-datepicker";    
export default {
  components: {
    'date-picker': DatePicker
  }
}
</script>

您还可以通过在创建Vue的主javascript文件中声明该组件来全局注册该组件。

新组件不会不创建新的Vue实例。

如何在HTML页面末尾添加NPM vuejs组件

1 个答案: