2017-10-06 2 views
0

vue js 2.3.o 버전을 사용하고 있습니다. 모달 창을 처리 할 때 플러그인을 사용하고 싶습니다. vue-js-modal (https://github.com/euvl/vue-js-modal).Vue-js 2.x에서 어떻게 플러그인을 사용할 수 있습니까?

라이브러리를 사용하고 싶을 때 내 페이지에 추가합니다.

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

var myVue = new Vue({ 

그럼 내가 볼 : 내가 VUE 인스턴스 자체를 만드는 오전하기 전에

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

나는 자리에 내가 대해 그것을 무엇인지 이해하지 못하는 어떤

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

. 뭐가 잘못 되었 니 ? 이 플러그인을 어떻게 올바르게 사용해야합니까?

script 태그를 사용하여 라이브러리를 가져 오는 것처럼 당신이

+0

파일의 맨 위에 'import' 문이 있습니까? – thanksd

+0

HTML 콘텐츠가있는 파일입니다. 나는 그것을 넣어야합니까? 맨 위에? 나는 동일한 결과로 – squirrelInTheBarel

답변

1

것 같다 감사드립니다. vue-js-modal의 지침에 따르면 npm install vue-js-modal --save을 설치 한 다음 import VModal from 'vue-js-modal'을 가져와 사용해야합니다. 모듈을 가져올 script 태그를 사용하는 경우

, 당신은 작성해야 : HTML 페이지에

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

합니다. 그러나 지금은 브라우저에서 모듈을 가져 오려면이 기능을 사용하려면 몇 가지 추가 단계를 수행해야합니다. (여기의 지침을 따르십시오 : link).

데모를 확인하는 것이 좋습니다 vue-js-modallink : script 태그 만 가져 오는 대신 Babel과 Webpack을 사용합니다. 또는 Vue 웹 앱을 설정할 때 cli 도구 (link)를 사용하여 시작 프로젝트를 설정 한 다음 vue-js-modal을 대신 설치하십시오.

+0

을 만들었습니다. 1. 문제, 브라우저에서 플래그를 활성화해야합니다. 따라서 일부 상용 웹에서는 사용할 수 없습니다. 많은 고객에게 이것이 어떻게 작동할까요? 기본 페이지에 몇 가지 메시지를 넣으십시오. 브라우저에서이 플래그를 활성화하여 페이지가 제대로 작동하도록하십시오. – squirrelInTheBarel

+0

2. 문제. 이 플래그를 활성화하면 오류 메시지가 사라집니다. 그러나 나는 다른 것을 가지고있다. "TypeError : 모듈 지정자를 해결하는 중 오류가 발생했습니다 : vue-modal-js". 내 import 문은 "vue-modal-js '에서 VModal 가져 오기;" ""을 참조하고 있습니다. 여기서 index.js는 https://github.com/euvl/에서 다운로드 한 파일입니다. vue-js-modal. 나는 진짜로 자바 스크립트 초보자, 그래서 어쩌면 나는이 개념의 몇 가지 기본 아이디어가 누락되었습니다. 고마워요 – squirrelInTheBarel

+0

오케이,'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

관련 문제