Vue.js项目中如何引入JavaScript第三方库全局变量将JavaScript第三方库添加到项目中，最简单的方法是附加到window对象上使其成为全局变量：//entry.js文件window._=require('lodash');JavaScriptcode://MyComponent.vuefileexportdefault{created(){console.log(_.isEmpty()?'Lodasheverywhere!':'Uhoh..');}}这种情况会导致window变量变大，但最重要的是，它们不能使用服务器渲染。当应用程序在服务器上运行时，window对象是未定义的，因此尝试访问window下的属性将抛出错误。在每个文件中导入的另一种二流方法是将库导入每个文件//MyComponent.vuefileimport_from'lodash';exportdefault{created(){console.log(_.isEmpty()?'Lodash在这里可用！':'呃哦..');}}这行得通，但是你需要重复手动导入和删除，这是一个痛点：你必须记住将这个库导入每个文件，然后当你的一个文件没有使用这个库时，记得删除它从这个文件。如果您没有正确设置构建工具，您最终可能会在构建包中得到同一个库的多个副本。更好的方法在Vue项目中使用Javascript库的最简洁和最健壮的方法是将其代理为Vue原型对象的属性。我们通过这种方式将Moment日期和时间库添加到我们的项目中：JavaScriptcode://entry.jsfileimportmomentfrom'moment';Object.definePrototype(Vue.prototype,'$moment',{value:moment});由于所有组件都将继承Vue原型对象上的方法，这将使Moment自动可用于任何组件，而无需全局变量或任何需要手动导入的组件。只需通过this.$moment访问即可在任何实例/组件中访问它：格式（“高：毫米”））；}}现在让我们花点时间了解它是如何工作的。Object.defineProperty我们通常会像这样设置一个对象属性：JavaScript代码：Vue.prototype.$moment=moment;你可以这样做，但是通过使用Object.defineProperty我们可以使用描述符来定义我们的属性。描述符允许我们设置一些低级别的细节，例如我们的属性是否可写，以及在for循环中的枚举期间显示。我们在日常使用Javascript中一般不会使用描述符，因为99%的时间我们不需要这种细粒度的属性赋值。但是这里给了我们一个明显的优势：默认情况下，使用描述符创建的属性是只读的。这意味着一些困惑的开发人员（可能是你）不能在组件内部做愚蠢的事情，破坏一切。JavaScript代码：this.$http='Assignsomerandomthingtotheinstancemethod';this.$http.get('/');//TypeError:this.$http.getisnotafunction相反，我们的只读实例很好地保护了我们的库，因为如果有人试图覆盖它，你会得到一个错误：TypeError:Cannotassigntoreadonlyproperty。$您会注意到我们将库代理到以美元符号“$”为前缀的属性名称。您可能已经看到其他属性和方法，例如$refs、$on、$mount等也是以“$”开头的。虽然在属性名上加前缀不是必须的，但这样做可以提醒迷茫的开发者（可能是你）这是一个公共的API属性或方法，欢迎你使用它，不像其他的属性实例，可能只是为了看。内部使用。作为一种基于原型的语言，Javascript没有（真正的）类，因此没有“私有”和“公共”变量或“静态”方法。该约定可以很好地替代我们认为值得遵循的约定。您还会注意到您可以使用this.libraryName来使用这个库，但是这样做有一个小问题，因为它现在是一个实例方法。然而，这样做的结果是，与全局变量不同，您必须确保在使用库时处于正确的范围内。内部回调方法无法通过它访问您的库。幸运的是，ES6中的箭头函数是一个很好的解决方案，它确保您在正确的范围内：JavaScriptcode://script.jsthis.$http.get('/').then(res=>{if(res.status!==200){this.$http.get('/')//etc//仅在箭头回调函数中有效。DockFools注意：你也可以使用ES5的bind();}});为什么不把它做成一个插件呢？如果你打算在多个Vue项目中使用一个JavaScript第三方库，或者你想与世界分享你的库，你可以将它构建为一个插件！该插件抽象出复杂的部分，允许您通过简单地在项目中执行以下操作来添加您选择的库：JavaScriptcode://script.jsimportMyLibraryPluginfrom'my-library-plugin';Vue.use(MyLibraryPlugin);use有了这两行，我们就可以在任何组件中使用JavaScript第三方库，就像我们可以使用Vue.use来使用VueRouter、Vuex等插件一样。编写插件首先，为您的插件创建一个文件。在此示例中，我将创建一个插件，将Axios添加到所有Vue实例和组件中，因此我将调用文件axios.js。主要要理解的是：插件必须公开一个以Vue构造函数作为第一个参数的安装方法：JavaScriptcode://axios.jsexportdefault{install:function(Vue){//Dostuff}}现在我们库可以使用前面介绍的方法添加到原型对象中：JavaScriptcode://axios.jsimportaxiosfrom'axios';exportdefault{install:function(Vue,){Object.defineProperty(Vue.prototype,'$http',{值:axios});我们现在需要做的就是使用实例方法将我们的库添加到项目中。例如，我们现在可以轻松添加Axios库：JavaScriptcode://entry.jsimportAxiosPluginfrom'./axios.js';Vue.use(AxiosPlugin);newVue({created(){console.log(this.$http?'Axiosworks!':'Uhoh..');}})复活节彩蛋：插件可选参数插件中的安装方法允许可选参数。有些开发人员可能不喜欢使用axios实例的方法名$http，因为VueResource已经使用了这个名称，所以让我们使用一个可选参数使它们成为您喜欢的方法名：JavaScriptcode://axios.jsimportaxiosfrom'axios';exportdefault{install:function(Vue,name='$http'){Object.defineProperty(Vue.prototype,name,{value:axios});}}JavaScriptcode://entry.jsimportAxiosPluginfrom'./axios.js';Vue.use(AxiosPlugin,'$axios');newVue({created(){console.log(this.$axios?'Axios有效！':'呃哦..');}})
