在 Vue.js 单文件组件中导入外部 js 库

Question

我在 Vue.js 中有以下单个文件组件。

plasmid 标签原本是由 angularplasmid.complete.min.js 文件呈现的，但出于某种原因并非如此。这是在组件中导入库的正确方法吗？

我正在重组一个旧的 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'

...

Answer 1

你绝对不能合理地将角度函数与 Vue 结合起来。另外，角度使用its own dependency system。

此外，您可以在单个文件组件中使用与在任何脚本中完全相同的方式导入。但当然要确保您导入的脚本实际上是在导出某些内容（或者与作为模块执行相关，这可能不是这里的情况）。

这里是语法提示：

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

请注意，commonJS require() 和 module.exports 在单文件组件中也非常好。

Answer 2

通过在我的组件安装时需要文件来解决：

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