如何在Vue.js 2.x中使用插件？

Question

我使用的是vue js 2.3.o版本。我想使用插件来处理模态窗口，例如vue-js-modal (https://github.com/euvl/vue-js-modal)。

当我想使用库时，我会将它添加到我的页面中。

<script type="text/javascript" src="/lib/vuejs/index.js"></script>

在创建vue实例本身之前，我放置了一个位置：

import VModal from 'vue-js-modal';
Vue.use(VModal);

var myVue = new Vue({   

然后我看到：

SyntaxError: import declarations may only appear at top level of a module

我不明白是怎么回事。怎么了？这个插件应该如何正确使用？

谢谢

Answer 1

似乎您正在使用script标记导入库。根据vue-js-modal的说明，您必须使用npm install vue-js-modal --save来安装，然后使用import VModal from 'vue-js-modal'进行导入。

如果使用script标记导入模块，则必须编写：

<script src="vue-js-modal.js" type="module"></script>

在你的HTML页面上。但是，就目前而言，如果要在浏览器中导入模块，则必须执行一些额外步骤才能启用此功能。(您可以按照这里的说明：链接)。

我的建议是查看vue-js-modal made：链接的演示，它使用Babel和Webpack，而不是只导入script标签。或者，当您设置Vue web应用程序时，使用他们的cli工具(链接)来设置一个初学者项目，然后安装vue-js-modal。