Vue框架中正确引入JS库的方法介绍_vue引入第三方js插件 - CSDN文库

引入第三方js库

759 浏览量更新于2023-05-31 评论收藏 63KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Vue框架中正确引入框架中正确引入JS库的方法介绍库的方法介绍

最近在学习使用vue框架，在使用中遇到了一个问题，查找相关资料终于找了正确的姿势，所以这篇文章主要给

大家介绍了关于在Vue框架中正确引入JS库的方法，需要的朋友可以参考借鉴，下面来一起看看吧。

本文主要给大家介绍的是关于在Vue框架中正确引入JS库的相关内容，分享出来供大家参考学习，下面话不多说，来一起看看

详细的介绍：

错误示范错误示范

全局变量法全局变量法

最不靠谱的方式就是将导入的库挂在全部变量window 对象下：

// entry.js:

window._ = require('lodash');

// MyComponent.vue:

export default {

created() {

console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');

}

}

这种方式的缺点有很多，我们只说其中一个关键的点：不支持服务端渲染。当应用跑在服务端时，window对象不存在，当然

试图去访问window下的属性会抛出错误。

处处引入法处处引入法

另外一个不太优雅的方式就是在需要的每个文件中都引入对应的库：

// MyComponent.vue：

import _ from 'lodash';

export default {

created() {

console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');

}

}

虽然这方法是可行的，但是太不简洁。你必须在每个文件中都记得引入，而且如果不需要了，又得重新删除。另外，如果打

包策略不够明智的话，可能会打包出多份重复的代码。

正确引入方式正确引入方式

最简单靠谱的方式是用库变成Vue的原型对象的属性。下面，我来演示如何将Moment 库引入：

import moment from 'moment';

Object.definePrototype(Vue.prototype, '$moment', { value: moment });

Object.definePrototype 语法参见 MDN

由于所有的组件都会继承Vue原型对象上的方法，因此这些方法在任何组件文件中都能通过this.$moment 访问到：

// MyNewComponent.vue

export default {

created() {

console.log('The time is ' . this.$moment().format("HH:mm"));

}

}

使用 Object.defineProperty 定义对象属性，如果不在属性描述器中额外说明，则该属性就是默认只读的，保护引入的库不被重新

赋值。

写成插件写成插件

如果你在项目的很多地方都用了某个库，或者你希望全局可用，你可以构建自己的Vue 插件。

插件能化繁为简，能让你像下面这样很简单地引入自己想要的库：

import MyLibraryPlugin from 'my-library-plugin';

Vue.use(MyLibraryPlugin);

就像Vue Route，Vuex等插件一样，我们的库仅仅需要两行，就能在任何地方使用了。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38710566

粉丝: 5
资源: 1030

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈