Vue.js 단일 파일 구성 요소에서 외부 js 라이브러리 가져오기

Vue.js 단일 파일 구성 요소에서 외부 js 라이브러리 가져오기

Vue.js에는 다음과 같은 싱글 파일 컴포넌트가 있습니다.

plasmid 태그는 angularplasmid.complete.min.js 파일에 의해 렌더링되지만 어떤 이유로 렌더링되지 않습니다.컴포넌트 내의 라이브러리를 Import 하는 올바른 방법입니까?

오래된 Vue 프로젝트를 보다 효율적으로 설계하기 위해 재구축하고 있습니다만, plasmid 태그가 여기에 렌더링되어 있는 것을 알고 있습니다(단일 파일 컴포넌트는 사용하지 않습니다).https://github.com/asselinpaul/dnaviewer/blob/master/app/index.html

아무쪼록 잘 부탁드립니다.

<template>
<div id="DNA Plasmid">
    <h3>Plasmid Visualisation</h3>
    <div class="section">
        <plasmid id='p1' plasmidheight="800" plasmidwidth="800" v-bind:sequencelength="sequenceLength">
            <plasmidtrack id='t1' radius="200" width="55">
                <trackmarker v-for="(bound, index) in bounds" class='marker' v-bind:start="bound.start" v-bind:end="bound.end" v-bind:style="{ fill: bound.color }" v-bind:key="bound.start">
                    <markerlabel v-bind:text="bound.name" v-bind:vadjust='bound.vadjust' style='font-size:12px'></markerlabel>
                </trackmarker>
                <tracklabel v-bind:text="name" style='font-size:25px;font-weight:bold'></tracklabel>
            </plasmidtrack>
        </plasmid>
    </div>
</div>

</template>

<script>
import './angularplasmid.complete.min.js'

...

각도 함수를 Vue와 합리적으로 결합할 수는 없습니다.또한 각도는 자체 종속 시스템을 사용합니다.

또한 단일 파일 구성 요소에서 가져오기를 다른 스크립트와 동일하게 사용할 수 있습니다.그러나 Import한 스크립트가 실제로 내보내기(또는 모듈로서 실행과 관련된 것)하고 있는 것을 확인해 주세요(여기에서는 그렇지 않을 수 있습니다).

다음은 구문에 대한 주의사항입니다.

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";

출처 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

공통점은JSrequire()그리고.module.exports하나의 파일 컴포넌트에서도 문제가 없습니다.

컴포넌트를 마운트할 때 파일이 필요하여 해결:

mounted: function(){
    require('./angularplasmid.complete.min.js')
  }

언급URL : https://stackoverflow.com/questions/44415570/importing-external-js-library-in-vue-js-single-file-component