如何在 Vue.js 中使用第三方js库

Question

如何在 Vue.js 中使用第三方js库

Answer 1

在 Vue.js 中使用第三方库的方式有：1.全局变量在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到 window 对象上:entry.jswindow._ = require('lodash');MyComponent.vueexport default {created() {console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');}}这种方式不适合于服务端渲染, 因为服务端没有 window 对象, 是 undefined, 当试图去访问属性时会报错.2.在每个文件中引入另一个简单的方式是在每一个需要该库的文件中导入:MyComponent.vueimport _ from 'lodash';export default {created() {console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');}}这种方式是允许的, 但是比较繁琐, 并且带来的问题是: 你必须记住在哪些文件引用了该库, 如果项目不再依赖这个库时, 得去找到每一个引用该库的文件并删除该库的引用. 如果构建工具没设置正确, 可能导致该库的多份拷贝被引用.