Vue框架引入JS库的正确姿势

Posted 2020-11-08 web前端开发技术

参考自：https://mp.weixin.qq.com/s?src=3&timestamp=1527154113&ver=1&signature=tWGeTa86gyK*RL0P7nwlA6-8V14FjzxUTh7CM9kQLjnXjchkqgw6Lm3C5JXI-ba9wmXjXglUMApGCHe2aIvGC-eWC8KuNsUl0PLTWLjdbjhiVZDS9SGRQuOc-pe0achyII43bi*cyMkSHrrC2Vb8d0Q0OW7DrF-RZ202wJqKED4=

 

正确引入方式

最简单靠谱的方式是用库变成Vue的原型对象的属性。

import moment from ‘moment‘;
Object.definePrototype(Vue.prototype, ‘$moment‘, { value: moment });

也可以：

Vue.prototype.$moment = moment;

 

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

export default {
  created() {
    console.log(‘The time is ‘ . this.$moment().format("HH:mm"));
  }
}