时间:2021-05-26
本文主要给大家介绍的是关于在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 库引入:
Object.definePrototype 语法参见 MDN
由于所有的组件都会继承Vue原型对象上的方法,因此这些方法在任何组件文件中都能通过this.$moment 访问到:
// MyNewComponent.vueexport 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.jsimport axios from 'axios';export default { install: function(Vue) { Object.defineProperty(Vue.prototype, '$http', { value: axios }); }}接着我们只需要Vue实例的use方法就能将这个库引入整个项目了。我们像下面代码一样简单引入:
// entry.jsimport AxiosPlugin from './axios.js';Vue.use(AxiosPlugin);new Vue({ created() { console.log(this.$http ? 'Axios works!' : 'Uh oh..'); }})插件参数设置
插件的install方法还可以接受其他的可选参数。有些开发者可能不喜欢Axios实例对象的方法名$http,因为Vue resource插件的方法名也是这个。然后,让我们利用第二个参数来修改它。
// axios.jsimport axios from 'axios';export default { install: function(Vue, name = '$http') { Object.defineProperty(Vue.prototype, name, { value: axios }); }}// entry.jsimport AxiosPlugin from './axios.js';Vue.use(AxiosPlugin, '$axios');new Vue({ created() { console.log(this.$axios ? 'Axios works!' : 'Uh oh..'); }})当然上面,我们可以直接在Object.defineProperty的中将name属性写死成$axios。也可以在install方法中引入多个需要的库。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
nodejs和vue的关系如下: 1、首先vue.js是库,不是框架,不是框架,不是框架。 2、Vue.js使用了基于HTML的模版语法,允许开发者声明式地
刚接触vue.js框架的时候,很伤脑筋。今天整理一下post/get两种方式,简单的调取数据库数据,并进行渲染,希望帮助大家!首先,在HTML页面引入://引入
一、在vue-cli的框架下的main.js(或者main.ts)中引入高德插件,代码如下:importVuefrom'vue'importVueAMapfro
开发场景当使用Vue框架进行项目开发时,在vue.config.js中配置好了路径别名后,到其他页面引入组件、引入css、引入静态文件路径时,使用路径别名不会智
一、介绍vue.js是目前最火的前端框架,vue.js兼具angular.js和react.js的优点,并剔除它们的缺点,并且提供了很多的周边配套工具如vue-