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

我正在使用vue js 2.3.o版本。我想用插件来处理模态窗口，例如vue-js-modal（https://github.com/euvl/vue-js-modal）。如何在Vue-js 2.x中使用插件？

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

<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

我不知道它是什么。哪里不对？这个插件应该如何正确使用？

谢谢

来源

2017-10-06 squirrelInTheBarel

您的'import'语句位于文件的最顶端吗？ – thanksd

它是带有HTML内容的文件。我应该把它放？在上面？我做到了，结果相同 – squirrelInTheBarel

好像你要导入使用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网页上

。但是，现在，如果您想要在浏览器中导入模块，则必须执行一些额外的步骤才能启用此功能。（您可以按照这里的说明：link）。

我建议查看演示vue-js-modal制作：link，它使用Babel和Webpack而不是只导入script标签。或者，当您设置Vue Web应用程序时，请使用他们的cli工具（link）来设置启动器项目，然后安装vue-js-modal。

来源

2017-10-07 06:22:38 kevguy

1.问题，我们需要在浏览器中启用一些标志。所以这不能用于某些商业网站。这将如何为大量的客户工作？我会在主页上放置一些信息，请在您的浏览器中启用此标志和此标志以使我们的页面适合您？ – squirrelInTheBarel

2.问题。启用此标志后，错误消息消失。但我有另一个。我得到“TypeError：错误解析模块说明符：vue-modal-js”。我的导入语句是“从'vue-modal-js'导入VModal;”我引用“”其中index.js是我从https://github.com/euvl/下载的文件VUE-JS-模式。我真的是JavaScript初学者，所以也许我错过了这个概念的一些基本概念。谢谢 – squirrelInTheBarel

好的，我认为'vue-js-modal.js'有一个ES6模块，目前的浏览器不支持，除非你进行黑客攻击，所以目前人们使用Webpack来处理它。就像我说的，看看演示'vue-js-modal'提供：https：//github.com/euvl/vue-js-modal/tree/master/demo，你可以看到他们的'index.html'使用了什么是webpack捆绑的'build.js'文件。先尝试运行示例，如果遇到任何问题，请告诉我。 – kevguy

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

回答

相关问题