在VueJS中調用外部庫函數

Question

我四處搜尋，但沒有找到如何完成此工作的示例。 基本上，我試圖連接一個外部JS文件（用JS編寫），並嘗試使用此文件調用其功能。

<script src="/static/medium-editor.min.js"></script>

<script>


export default {
name: 'App',

mounted: function() {
    var editor = new MediumEditor('.editable', {
        toolbar: {
            buttons: ['bold', 'italic', 'underline', 'anchor']
        }
    });
    console.log('testing...')
}

}
</script>

該文件似乎加載正常，但出現此錯誤

ReferenceError: MediumEditor is not defined

我也嘗試過使用import MediumEditor，但我認為我們必須將其導出到其他js文件中，但該文件也無法正常運行。

作為參考，我正在嘗試將此插件添加到我的vuejs測試項目中： https : //github.com/yabwe/medium-editor/blob/master/dist/js/medium-editor.js

如果有人對我們如何在VueJS中調用該外部函數並使之起作用有任何想法，我將非常感激。 我是一個初學者，但是我整天都在搜索，沒有找到類似的解決方案。

提前致謝

錢德拉

更新 ：如果您想嘗試，添加了一個JSFiddle： https ://jsfiddle.net/maharzan/nze45uxf/2/

Answer 1

您不必使用script標簽導入文件，而使用import語句即可。

<script>

    import MediumEditor from '/static/medium-editor.min.js'

    export default {
        name: 'App',

        mounted: function() {
            var editor = new MediumEditor('.editable', {
                toolbar: {
                buttons: ['bold', 'italic', 'underline', 'anchor']
            });
            console.log('testing...')
        }
    }

</script>

更新：-

如果使用module.exports導出函數，然后使用import語句導入該函數， module.exports出現錯誤： Cannot assign to read-only property 'exports' of object '#<Object> 。 為了防止它使用export default導出功能。

看到這個： -https : //github.com/webpack/webpack/issues/4039