vuejs在spa中包含javascript庫

Question

我正在使用vuejs創建spa應用程序，發現在加載我的JavaScript庫（例如bootstrap.js或jquery.js）和其他JavaScript庫時，我有3個選擇：

1.首先是通過將我將在我的應用程序中使用的所有javascript庫包含在我的vuejs應用程序所在的index.html中，但是我發現有些javascript庫無法正常運行

例如：有一些javascript庫通過選擇具有特定id =“ page-container”的div來計算頁面高度，但是從服務器呈現頁面時未加載該div，因此此時，由於id =“頁面容器”尚不存在。

2.第二步是通過將其添加到我所有的JavaScript庫js中

// before you use your files in some components,you should package them
// your local files
export default {   //export your file
   your_function(){ // defined your function
   ...
   }
}

// now your can use it
// your component file

<script>
import local_file from 'your_file_relative_path'
//now you can use it in the hook function
created(){  //or other hook function
   local_file.your_function() //call your function
}

</script>

但這意味着我需要更改我使用的每個JavaScript庫...

3.第三個是使用npm添加它，然后在vue組件中將其導入，它可以正常工作並且感覺更自然，但是並不是我的所有JavaScript庫都在npm中，其中一些與我從themeforest購買的管理模板相關，並且永遠不會在npm中。

---

所以哪一個是更好的方法，或者我能找到那3個選擇的更好的方法？ 很難找到提及將其他JavaScript庫添加到spa vuejs的任何教程或討論，其中大多數只是將引導程序放入index.html中並完成。

Answer 1

好吧，如果您的庫在NPM中存在，那么這是最好的選擇，因為這樣您就可以僅導入某些組件所需的腳本部分，例如fontawesome庫，則只能導入那些您需要而不是全部導入！

但是，如果您的腳本不在NPM中，則最好的選擇是在腳本需要運行的組件的beforeMount或beforeCreate中運行您的腳本。

確實不建議在html上添加鏈接引用的第三種方法，因為這將是全局的並且會降低性能。