Question

我正在使用vuejs创建spa应用程序，我发现我有3个选项来加载我的javascript库，如bootstrap.js或jquery.js和其他javascript库：

1。第一个是包含我将在index.html中使用的所有javascript库，我的vuejs应用程序将在其中存在，但我发现有一些javascript库不能正常工作

ex：有一些javascript库可以通过选择一个具有特定id =＆＃34; page-container＆＃34;的div来计算页面高度，但是当从页面呈现页面时未加载div服务器，所以在那一刻javascript将抛出错误，因为id =＆＃34; page-container＆＃34;还不存在。

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的教程或讨论，其中大多数只是将一个bootstrap放入index.html并完成。

Answer 1

好吧，如果你的库存在于NPM中，那么这是最好的选择，因为你有这个选项只导入某些组件所需的脚本部分，例如，fontawesome库，你只能导入您需要的图标而不是导入所有图标！

但如果您的脚本不在NPM中，最好的选择是在脚本运行所需的组件的beforeMount或beforeCreate中运行脚本。

第三种方法是在html上添加链接引用并不是真的建议，因为它将是全局的并且会降低性能。

vuejs包括spa中的javascript库

1 个答案: