我在 Vue.js 中有以下单文件组件。
plasmid 标签旨在由 angularplasmid.complete.min.js 文件渲染,但由于某种原因没有渲染。这是在组件中导入库的正确方法吗?
我正在重组一个旧的 Vue 项目以进行更好的设计,但我知道 plasmid 标签呈现在此处(不使用单个文件组件):https://github.com/asselinpaul/dnaviewer/blob/主/应用程序/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'
...
通过在安装我的组件时要求文件来解决:
mounted: function(){
require('./angularplasmid.complete.min.js')
}
你肯定无法合理地将 Angular 函数与 Vue 结合起来。另外,角度使用其自己的依赖系统。
此外,您可以在单文件组件中使用导入,方式与在任何脚本中完全相同。但当然要确保您导入的脚本实际上正在导出某些内容(或者与作为模块执行相关,这里可能不是这种情况)。
这里是语法提醒:
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
在单文件组件中也完全没问题。