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等插件一样，我们的库仅仅需要两行，就能在任何地方使用了。
如何写插件
首先，创建一个文件。本例中，我将引入一个Axios库的插件。我们就把这个文件命名为axios.js 吧。
最关键的地方在于，我们需要暴露一个将Vue构造器作为第一个参数的install 方法。
// axios.js:
export default {
install: function(Vue) {
// Do stuff
}
}
然后我们可以用之前的方式将库添加到Vue的原型对象上：
// axios.js
import axios from 'axios';
export default {
install: function(Vue) {
Object.defineProperty(Vue.prototype, '$http', { value: axios });
}
}
接着我们只需要Vue实例的use方法就能将这个库引入整个项目了。我们像下面代码一样简单引入：
// entry.js
import AxiosPlugin from './axios.js';
Vue.use(AxiosPlugin);
new Vue({
created() {
console.log(this.$http ? 'Axios works!' : 'Uh oh..');
}
})
插件参数设置
插件的install方法还可以接受其他的可选参数。有些开发者可能不喜欢Axios实例对象的方法名$http，因为Vue resource插件的方法名也是这个。然后，让我们利用第二个参数来修改它。
// axios.js
import axios from 'axios';
export default {
install: function(Vue, name = '$http') {
Object.defineProperty(Vue.prototype, name, { value: axios });
}
}
// entry.js
import AxiosPlugin from './axios.js';
Vue.use(AxiosPlugin, '$axios');
new Vue({
created() {
console.log(this.$axios ? 'Axios works!' : 'Uh oh..');
}
})
当然上面，我们可以直接在Object.defineProperty的中将name属性写死成$axios。也可以在install方法中引入多个需要的库。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持
相关文章
这篇文章主要为大家介绍了图解Vue的响应式原理，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
本文主要介绍了vue-json-editor json编辑器的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了vue实现兄弟组件之间跳转指定tab标签页，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
.sync修饰符是Vue中用于实现子组件修改父组件传递的props值并更新到父组件的功能,它实际上是一个语法糖,将子组件的props绑定到一个名为update:propName的自定义事件上,本文给大家介绍了vue3中sync修饰符的使用,需要的朋友可以参考下2023-10-10
uni-aap提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息，这篇文章主要介绍了uni-app获取当前环境信息的相关知识,需要的朋友可以参考下2022-11-11
本篇文章主要介绍了深入理解Vue官方文档梳理之全局API，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
Element中el-select下拉框实现选中图标并回显图标
本文主要介绍了Element中el-select下拉框实现选中图标并回显图标，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-12-12
vue-router next(false) 禁止访问某个页面时,不保留历史访问记录问题
这篇文章主要介绍了vue-router next(false) 禁止访问某个页面时,不保留历史访问记录问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
如何使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理
最近在做一个文件夹管理的功能，要实现一个树状的拖拽文件夹面板，里面包含两种元素，文件夹以及文件，这篇文章主要介绍了使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理 ,需要的朋友可以参考下2023-09-09
Vue项目代码之路由拆分、Vuex模块拆分、element按需加载详解
这篇文章主要介绍了Vue项目代码之路由拆分、Vuex模块拆分、element按需加载,项目较大路由较多时，路由拆分是一个不错的代码优化方案，按不同业务分为多个模块，结构清晰便于统一管理，本文通过示例给大家详细讲解，需要的朋友可以参考下2022-11-11
最新评论