如何在Vuejs中优雅使用Javascript各种插件

Posted 2020-10-15 李大白

在日常开发中，为了敏捷开发或者更快满足业务需求，不得不使使用js第三方库或者插件。

如何在Vue项目中引入javascript第三方库

---

 

全局变量

将 JavaScript 第三方库 添加到项目中，最简单的办法是通过将其附加到 window 对象上，以使其成为全局变量。

如何引入：

window._ = require(‘lodash‘); 

如何使用：

export default {
  created() {
    console.log(_.isEmpty() ? ‘Lodash everywhere!‘ : ‘Uh oh..‘);
  }
}

这种情况会使 window 变量不断增长，但是最关键的是，他们不能使用服务器渲染。当应用程序在服务端运行时，window 对象是 undefined 的，因此尝试访问 window 下的属性将会抛出一个错误。

使用ES6在每个文件中导入

二流的方法是将库导入到每个文件中：

// MyComponent.vue 文件
import _ from ‘lodash‘;
export default {
  created() {
    console.log(_.isEmpty() ? ‘Lodash is available here!‘ : ‘Uh oh..‘);
  }
}

这是有效的，但是你需要重复手动导入和移除，这是一个痛点：你必须记住将这个库导入到每个文件中，然后当你的某个文件不用这个库的时候, 记得要将它从这个文件中移除。如果你没有正确地设置你的构建工具，则可能会最终导致在构建包中存在同一个库的多个副本。

更好的方式

在Vue项目中使用Javascript库的最干净，最健壮的方法是将其代理为 Vue 原型对象的属性。我们用这种方式，将 Moment日期和时间库添加到我们的项目中：

import moment from ‘moment‘;
Object.definePrototype(Vue.prototype, ‘$moment‘, { value: moment });

由于所有组件都会继承 Vue 原型对象上方法，这将使 Moment 自动可用于任何组件，没有全局变量或任何需要手动导入的组件。它可以在任何 实例/组件 中简单地通过 this.$moment 访问被访问：

export default {
  created() {
    console.log(‘The time is ‘ . this.$moment().format("HH:mm"));
  }
}

大功告成！