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

// entry.js:
window._ = require('lodash');

// MyComponent.vue:
export default {
 created() {
 console.log(_.isEmpty() "htmlcode">

// MyComponent.vue：
import _ from 'lodash';

export default {
 created() {
 console.log(_.isEmpty() "color: #ff0000">正确引入方式

最简单靠谱的方式是用库变成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 "htmlcode">

// 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 "color: #ff0000">总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持

            
           
            上一篇：使用travis-ci如何持续部署node.js应用详解

            下一篇：webpack配置sass模块的加载的方法