如何在HTML页面末尾添加NPM vuejs组件
如何在HTML页面末尾添加NPM vuejs组件
提问于 2018-11-15 16:12:11
我有一个用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。
然后我尝试了“requiring”vue和vuejs-datepicker，但发现了require is not defined。
有没有一种简单的方法可以做到这一点，而不需要求助于CDN，或者我应该只返回到单文件组件？
回答 1
Stack Overflow用户
发布于 2018-11-15 22:38:52
请阅读：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文件中声明它来全局注册组件。
New components do NOT create a new Vue instance。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53314950
复制相关文章
相似问题
腾讯云开发者
