参考自: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"));
}
}

Vue框架引入JS库的正确姿势的更多相关文章

  1. 必备技能六、Vue框架引入JS库的正确姿势

    在Vue.js应用中,可能需要引入Lodash,Moment,Axios,Async等非常好用的JavaScript库.当项目变得复杂庞大,通常会将代码进行模块化拆分.可能还需要跑在不同的环境下,比如 ...

  2. 050——VUE中使用js库控制vue过渡动作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 在Vue将第三方JS库封装为组件使用

    第三方JS库地址:https://github.com/inorganik/CountUp.js 使用NPM进行安装: npm install --save countup 根据官方回答,CountU ...

  4. uni-app 引入本地iconfont的正确姿势以及阿里图标引入

    1.引入本地iconfont iconfont文件里面包含 iconfont.ttf.iconfont.css, 将 iconfont.tt64文件转位 base64.推荐转换工具地址:https:/ ...

  5. 在vue项目中封装echarts的正确姿势

    为什么需要封装echarts 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余 在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作 可能有一些开发者忘记 ...

  6. vue中引入js,然后new js里的方法

    阿里云Web播放器Web端使用SDK说明:https://help.aliyun.com/document_detail/51991.html?spm=5176.11065259.1996646101 ...

  7. vue项目 引入js文件

    例如我想将laydate.js引到vue项目中 将用到的js文件放到static文件夹内,在项目的根目录下的index.html内引入 <script src="static/js/l ...

  8. Vue全局引入JS的方法

    两种情况: 1. js为ES5的写法时,如下(自定义的my.js): function fun(){ console.log('hello'); } Vue中的全局引入方式为,在index.html中 ...

  9. composer安装第三方的库packagist.org(laravel框架引入第三方库)

    建立composer.json composer require phpoffice/phpexcel //安装一个excel扩展库 composer require gregwar/captcha ...

随机推荐

  1. 如何从fragment跳到activity再从activity返回(finish()方法返回)刷新fragemnt页面

    代码改变世界 如何从fragment跳到activity再从activity返回(finish()方法返回)刷新fragemnt页面 广播方法实现Fragment页面刷新 fragment中重写onA ...

  2. 【bzoj1221】[HNOI2001] 软件开发 费用流

    题目描述 某软件公司正在规划一项n天的软件开发计划,根据开发计划第i天需要ni个软件开发人员,为了提高软件开发人员的效率,公司给软件人员提供了很多的服务,其中一项服务就是要为每个开发人员每天提供一块消 ...

  3. luogu3723 [AH2017/HNOI2017]礼物 【NTT】

    题目 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手 环,一个留给自己,一 个送给她.每个手环上各有 n 个装饰物,并且每个装饰物都有一定的亮度.但是在她生日的前一天, ...

  4. envsetup.sh 与 choosecombo

    choose: 来定义编译选项, choosecombo 将会一步一步提示你输入相应的编译参数 https://blog.csdn.net/kickxxx/article/details/692518 ...

  5. tableView镶嵌加入CollectionView实现方法

    创建一个继承UICollectionView的类QHCollectionView在QHCollectionView.h中添加接口方法 @interface QHCollectionView : UIC ...

  6. 能量采集(bzoj 2005)

    Description 栋栋有一块长方形的地,他在地上种了一种能量植物,这种植物可以采集太阳光的能量.在这些植物采集能量后, 栋栋再使用一个能量汇集机器把这些植物采集到的能量汇集到一起. 栋栋的植物种 ...

  7. 修复受损的linux引导

    想来楼主玩linux差不多近20年了,从redhat,mandrke,manjaro,汉化,听歌.看电视电影.上网.打游戏.配置打印机等,碰到的问题一一解决了,但是一直对装好linux后重新安装win ...

  8. Python学习杂记_10_三元运算符

    常用三元运算符来简化分支和循环的代码: 分支简化: a = 1b = 2c = a if a > 1 else bprint(c) # 以上几行等同于 a = 1b = 2if a >1: ...

  9. cisco packet 实验教程(二)

    06. 三层交换机实现VLAN间路由 技术原理 1)三层交换机是带有三层路由功能的交换机,也就是这台交换机的端口既有三层路由功能,也具有二层交换功能.三层交换机端口默认为二层口,如果需要启用三层功能就 ...

  10. pylint & jenkins

    利用pylint 检测 python源码. Pylint 提供了简单的方式来分析 Python 代码,其高可配置性很容易使一个部门的人员使用统一的代码风格. Pylint 是什么 Pylint 是一个 ...