如何在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
我不知道它是什么。哪里不对 ?这个插件应该如何正确使用?
谢谢
好像你要导入使用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
。
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
您的'import'语句位于文件的最顶端吗? – thanksd
它是带有HTML内容的文件。我应该把它放?在上面 ?我做到了,结果相同 – squirrelInTheBarel