Vue框架中正确引入JS库的方法介绍
|
本文主要给大家介绍的是关于在Vue框架中正确引入JS库的相关内容，分享出来供大家参考学习，下面话不多说，来一起看看详细的介绍： 错误示范全局变量法最不靠谱的方式就是将导入的库挂在全部变量window 对象下： // MyComponent.vue:
export default { created() { console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..'); } } 这种方式的缺点有很多，我们只说其中一个关键的点：不支持服务端渲染。当应用跑在服务端时，window对象不存在，当然试图去访问window下的属性会抛出错误。 处处引入法另外一个不太优雅的方式就是在需要的每个文件中都引入对应的库： export default {
created() { console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..'); } } 虽然这方法是可行的，但是太不简洁。你必须在每个文件中都记得引入， 而且如果不需要了，又得重新删除。另外，如果打包策略不够明智的话，可能会打包出多份重复的代码。 正确引入方式最简单靠谱的方式是用库变成Vue的原型对象的属性。下面，我来演示如何将Moment 库引入：
由于所有的组件都会继承Vue原型对象上的方法，因此这些方法在任何组件文件中都能通过this.$moment 访问到： 使用 写成插件如果你在项目的很多地方都用了某个库，或者你希望全局可用，你可以构建自己的Vue 插件。 插件能化繁为简，能让你像下面这样很简单地引入自己想要的库： 就像Vue Route，Vuex等插件一样，我们的库仅仅需要两行，就能在任何地方使用了。 如何写插件首先，创建一个文件。本例中，我将引入一个Axios库的插件。我们就把这个文件命名为axios.js 吧。 最关键的地方在于，我们需要暴露一个将Vue构造器作为第一个参数的install 方法。 export default {
install: function(Vue) { // Do stuff } } 然后我们可以用之前的方式将库添加到Vue的原型对象上： export default {
install: function(Vue) { Object.defineProperty(Vue.prototype,'$http',{ value: axios }); } } 接着我们只需要Vue实例的use方法就能将这个库引入整个项目了。我们像下面代码一样简单引入： new Vue({
created() { console.log(this.$http ? 'Axios works!' : 'Uh oh..'); } }) 插件参数设置插件的install方法还可以接受其他的可选参数。有些开发者可能不喜欢Axios实例对象的方法名$http，因为Vue resource插件的方法名也是这个。然后，让我们利用第二个参数来修改它。 export default {
install: function(Vue,name = '$http') { Object.defineProperty(Vue.prototype,name,{ value: axios }); } } new Vue({
created() { console.log(this.$axios ? 'Axios works!' : 'Uh oh..'); } }) 当然上面，我们可以直接在 总结以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |