vue2.0 解决抽取公用js的问题

首先创建公用js

在static中创建js—>utils.js

utils.js内容如下：

export default {
 install(Vue, options) {
  Vue.prototype.formatDuring = function (mss) {
   var days = parseInt(mss / (1000 * 60 * 60 * 24));
   var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
   var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
   var seconds = (mss % (1000 * 60)) / 1000;
   return days + " 天 " + hours + " 小时 " + minutes + " 分 " + Math.round(seconds) + " 秒 ";
  }
 }

}

在main.js中引入，以便全局使用

// 引入公用js
import utils from '../static/js/utils.js'
Vue.use(utils);

在需要的地方使用

endline = this.formatDuring(currentTime);

ok！

补充知识：VUE 创建共通js 以及引用该js的共通方法

一个方法被多个js函数多次调用，为了减少代码量以及方便后期维护，创建一个公用的js类。

commonUtil 共通类

// 共通类
let commonUtil = {
};

commonUtil.openLogin = function (terminal) {
  console.log("i am is js mathod;" + terminal);
};

export default commonUtil;

其他js调用

首先引入该类

import commonUtil from "../../../src/utils/commonUtil";

其次调用共通类里面的openLogin方法

commonUtil.openLogin("Hello VUE");

运行结果：

以上这篇vue2.0 解决抽取公用js的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue学习笔记五：在vue项目里面使用引入公共方法详解

    今天早上来到公司,没事看了一下别人的博客,然后试了一下,发现的确是可以的,在此记录一下,方便自己日后查阅. 首先新建一个文件夹:commonFunction ,然后在里面建立 一个文件common.js 建立好之后,在main.js里面引入这个公共方法 最后是调用这个公共方法 测试一下,我在公共方法里面写了一个简单的一段代码如下: export default{ login:function(){ console.log("1111"); } } 如何在我的login.vue里面控制台

  • vue定义全局变量和全局方法的方法示例

    一.全局引入文件 1.先定义共用组件 common.vue <script type="text/javascript"> // 定义一些公共的属性和方法 const httpUrl = 'http://39.105.17.99:8080/' function commonFun() { console.log("公共方法") } // 暴露出这些属性和方法 export default { httpUrl, commonFun } </scrip

  • 在vue.js中抽出公共代码的方法示例

    在vue.js中抽出公共代码的方法示例

    前言 当我们在使用vue构建中大型项目时,通常会遇到某些经常用的方法以及属性,比如说搭建一个员工管理系统,请求的url需要一个共同的前缀,或者在某几个view中需要用到时间,这个时间是通过某方法格式化之后的等等,如果每次用到都写共同的代码,那样如果之后有变动的话维护起来会非常麻烦. 所以我们就得想办法抽出公共代码,因为vue是组件化开发,我们就会很自然的与es6的module模块化联系到一起.其实当我们在搭建项目结构时就应该先提前埋下伏笔,有一个util文件夹,里面放的就是我们要写的公共代码,其

  • vue2.0 解决抽取公用js的问题

    首先创建公用js 在static中创建js->utils.js utils.js内容如下: export default { install(Vue, options) { Vue.prototype.formatDuring = function (mss) { var days = parseInt(mss / (1000 * 60 * 60 * 24)); var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 6

  • vue2.0在没有dev-server.js下的本地数据配置方法

    vue2.0在没有dev-server.js下的本地数据配置方法

    问题描述: 在vue2.0的以上的版本,vue-cli的build的文件夹下没有dev-server.js文件,那怎么配置mock数据 Vue2.x在build下的webpack.dev.conf.js配置就行 //在const portfinder = require('portfinder')后添加 const express = require('express') // nodejs开发框架express,用来简化操作 const app = express() // 创建node.js

  • 解决Vue2.0自带浏览器里无法打开的原因（兼容处理）

    本文介绍了解决Vue2.0自带浏览器里无法打开的原因(兼容处理),分享给大家,希望对大家有帮助 Vue 之 android内嵌H5页面不显示出现这个问题,原因有很多 首先,别急,请看下面的推荐方案: 1.找个Android真机测试下(机型版本为4.4以上),真机联调测试 Android 只需要四个步骤: 1.先保证 是否安装了chrome浏览器 2.其次 ,保证 chrome 是否 已经翻墙成功! 3.最后 使用Android 真机连接 电脑 4.最后的最后,打开chrome ,输入:chrom

  • 解决vue2.0动态绑定图片src属性值初始化时报错的问题

    在vue2.0中,经常会使用类似这样的语法 v-bind:src = " imgUrl "(缩写 :src = " imgUrl "),看一个案例 <template> <div> <img :src="imgUrl"> </div> </template> <script> export default { data(){ return { captcha_id: &quo

  • vue2.0 路由不显示router-view的解决方法

    今天学习vue2.0 的 router-view , 爆出的错误不计其数,不知道哪位大神写的router-view,配置的参数竟然不是router,而是routes =_=|| 这是花了一上午整出来的main.js,还有网上的同道们的提醒: import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './App'; import goods from './components/goods/goods';

  • 解决Vue2.0中使用less给元素添加背景图片出现的问题

    在使用less在Vue.js中给元素添加背景图片时 或者你会出现这样的写法 background-image: url('../img/' + @{bg_url} + '2x.png'); 或者这样 background-image: url('../img/' + @bg_url + '2x.png'); 这样 background-image: url(../img/@{bg_url}2x.png); 还有这样 background-image: url(../img/@bg_url2x.p

  • 解决Vue2.0 watch对象属性变化监听不到的问题

    问题 很早之前就遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性.发现子组件使用deep watch都不能观察到对象中属性的变化,今天终于找到为啥出现这种问题和解决办法了. 解决 为啥出现这种问题?受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除. 请参照https://v1-cn.vuejs.org/guide/reactivity.html 解决方式: 通过vue的this.$set(object, key, value)方法 通过Object.assign()

  • Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能

    本文实例为大家分享了Vue2.0实现调用摄像头进行拍照功能的具体代码,以及图片上传功能引用exif.js,供大家参考,具体内容如下 可以在github 上下载demo链接 vue组件代码 <template> <div> <div style="padding:20px;"> <div class="show"> <div class="picture" :style="'backg

  • vue2.0.js的多级联动选择器实现方法

    由于工作需求,想实现一个多级联动选择器,但是网上现有的联动选择器都不是我想要的,我参照基于vue2.0的element-ui中的Cascader级联选择器的样式实现了复合自己要求的多级联动选择器,原理很简单,不多说,直接上代码... <template> <div id="app"> <div class="select"> <div class="input_text"><input typ

  • vue2.0路由切换后页面滚动位置不变BUG的解决方法

    最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变. <a href="javascript:;" rel="external nofollow" class="btn btn01" @click="useRightNow">立即试用</a> <router-link class="db" to="/user">个人中心<

随机推荐