>  Q&A  >  본문

javascript - vue에서 네이티브 js 플러그인을 사용하는 방법

.vue 파일에서 공개 메소드를 사용하는 방법은 무엇입니까? 지금까지 시도했지만 메소드 이름을 통해 직접 호출할 수 없습니다

예:

으아악

두 가지 질문이 있습니다.
1. 메소드를 어디에 작성해야 하나요? main.js로 작성해야 하나요? 아니면 별도의 common.js 파일을 만들어 main.js로 가져와야 하나요?
2. Login.vue 파일에서 어떻게 호출하나요? Direct getId()가 작동하지 않고 getId가 정의되지 않았다는 오류가 보고됩니다

迷茫迷茫2672일 전1737

모든 응답(8)나는 대답할 것이다

  • 学习ing

    学习ing2017-06-26 10:59:23

    플러그인 패키지의 구조에 따라 일반적으로 여러 가지 로딩 방법이 있지만 기본적으로 로딩 코드는 main.js或者App.vue에 추가됩니다.

    • 플러그인 패키지가 순수 JS 또는 CSS 파일이고 전역 플러그인 변수를 노출하는 경우 import 'xxxxxx'就可以了,其中xxxxxx가 JS 또는 CSS에 대한 경로이면 됩니다. 이러한 플러그인에는 jQuery 및 Bootstrap이 포함됩니다.

    • 그러나 import '....'加载之后不能直接使用,需要在打包脚本配置webpack.base.conf.js를 통해 jQuery JS 파일에 다음 구성이 추가된다는 점에 유의해야 합니다(구성 중 일부가 생략됨):

    으아악

    이 구성의 헤더에 var webpack = require('webpack'),防止报错webpackundef를 추가하는 것도 참고하세요.

    • 플러그인이 모듈화되어 개체나 메서드가 노출되었지만 모듈 간에 사용할 수 없는 경우(예: npm安装到项目的bootbox插件),我是通过在框架App.vue里添加import bootbox from 'bootbox/bootbox.js',然后在App.vuedata中添加一行bootbox: bootbox,在其他Vue页面中通过this.$root.bootbox.

    • 를 통해 bootbox 플러그인 호출)
    • import的方法加载,需要使用var xxx = require('xxx')的方式加载。这种插件一般是作为Vue框架的插件来用的,比如Vue-filter。这种一般是在main.js里添加var vueFilter = require('vue-filter')加载,然后用Vue.use(vueFilter)使vue-filter를 통해 Vue 애플리케이션에 등록할 수 없는 플러그인도 있습니다.

    • 귀하의 설명에 따르면 이 방법은 다른 파일을 작성하고 main.js里实现起来是没有区别的。建议在App.vue里写这个方法,然后加到methods里去,在需要调用的地方使用this.$root.getId()call을 직접 작성합니다(위의 세 번째 사례 참조)

    회신하다
    0
  • 某草草

    某草草2017-06-26 10:59:23

    main.jsimport에 직접 들어가시면 됩니다.

    회신하다
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-06-26 10:59:23

    ES6 모듈을 배우고, 일반적인 메소드를 모듈로 작성하고, 호출해야 하는 모듈에서 호출하는 것이 좋습니다. main.js에서도 작성할 수 있습니다.

    으아악

    그럼 전 세계적으로 window.util.xxx전화하세요.

    회신하다
    0
  • 淡淡烟草味

    淡淡烟草味2017-06-26 10:59:23

    이것이 제가 처리하는 방법입니다. 새 js common.js를 만들고 전역 변수를 정의하세요

    으아악

    그런 다음 common.js를 main.js에 도입합니다

    으아악

    그런 다음 login.vue 파일에서 이 전역 변수를 다음과 같이 사용할 수 있습니다

    this.url.commonUrl`

    회신하다
    0
  • 世界只因有你

    世界只因有你2017-06-26 10:59:23

    다른 파일에 작성된 도구 클래스로 .vue파일에 국한되지 않고 다른 곳에서 가져올 수 있습니다.
    (util.js)

    으아악

    (login.vue)

    으아악

    회신하다
    0
  • 世界只因有你

    世界只因有你2017-06-26 10:59:23

    1. 새 common.js를 만들고 다음과 같이 작성합니다.
    (function(win, undefine) {

    으아악

    })(창);

    2.main.js 소개
    import "./common.js"

    3. 모든 .vue 파일에서 호출 가능
    <script>
    기본값 내보내기{

    으아악

    }
    </script>

    회신하다
    0
  • 巴扎黑

    巴扎黑2017-06-26 10:59:23

    @rehapun 님의 답변처럼 제가 평소에도 이렇게 사용하는 편이 아주 좋습니다. 또한, 반복해서 참조하여 포장량이 늘어나는 것을 걱정하지 않으셔도 된다는 점을 말씀드리고 싶습니다. webpack.js로 패키징할 때 CommonsChunkPlugin을 사용하여 퍼블릭 벤더를 추출할 수 있습니다.

    회신하다
    0
  • 为情所困

    为情所困2017-06-26 10:59:23

    먼저 정의한 js 파일을 인용하세요import '文件的位置',

    으아악

    회신하다
    0
  • 취소회신하다