在Vue.js中導入外部js庫單個文件組件

我在Vue.js中有以下單個文件組件。在Vue.js中導入外部js庫單個文件組件

的質粒標籤是爲了獲得由渲染angularplasmid.complete.min.js文件，但不是出於某種原因。這是在組件中導入庫的正確方法嗎？

我重組能更好地設計了一個老Vue的項目，但我知道，質粒標籤呈現在這裏（不使用單個文件組件）：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' 

...

來源

2017-06-07 asselinpaul

這看起來像一個角圖書館，我希望你將它與Vue公司合併，因爲角度和Vue公司都將被爭奪的模板問題。 – Bert

@BertEvans我告訴Vue忽略與角度位'Vue.config.ignoredElements = ['質粒'，'質感道路'，'trackscale'，'trackmarker'， 'tracklabel'，'markerlabel' ] ' – asselinpaul

當然，但由於這是一個組件，當Angular初始化時，該頁面可能不存在於頁面上。 – Bert

你絕對不能合理地將角度函數與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也是在單文件組件完美的罰款。

來源

2017-06-07 14:55:35 Cobaltway

它在這裏工作（我以前的非單一文件組件嘗試）：https://dna.now.sh/代碼在這裏：https://github.com/asselinpaul/dnaviewer/blob/master/app /index.html – asselinpaul

我認爲問題在於Vue.js填充視圖之前，AngularPlasmid代碼正在尋找標記。 – asselinpaul

通過要求時，我的組件安裝文件解決：

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

來源

2017-06-07 16:08:53 asselinpaul

我很高興這個工作，但我不知道當/如果組件重新呈現（如果它曾經是）會有問題。 – Bert

有趣，目前它不是，但我明白爲什麼它可能會失敗。 – asselinpaul

在Vue.js中導入外部js庫單個文件組件

回答

相關問題