平时在web应用开发过程中,我们可以console.log去输出一些信息,但是在移动端,也就是在手机上,console.log的信息我们是看不到的。

这种情况下,可以选择使用alert弹出一些信息,但是这种方法不怎么方便,也会阻断JS线程,导致后面的线程都不执行。也影响调试体验。

那么,如果将console.log应用到移动端呢?
需要借助第三方插件:vConsole

使用方法:

  1. <script src="path/to/vconsole.min.js"></script>
  2. <script>
  3. console.log("test")
  4. </script>

在Vue-JS项目中使用:
1.package.json安装vconsole包(可以放在devDependencies中)

2.main.js中引入:

  1. // 因为vConsole并不需要调用,
  2. // 所以前面加“eslint-disable no-unused-vars”规避掉eslint语法检查
  3.  
  4. /* eslint-disable no-unused-vars */
  5. import vConsole from 'vconsole'

3.此时可以使用console.log
原理:改写了console.log,重写了实现,用vConsole代理

原文链接:https://www.jianshu.com/p/f79d223ca616

vue--vConsole的更多相关文章

  1. vue-devtools : vue的调试工具及log显示工具 vconsole

    使用 devtools 有很多好处,比如它可以让你能够实时编辑数据属性并立即看到其反映出来的变化.另一个主要的好处是能够为 Vuex 提供时间旅行式的调试体验. 注意:请留意如果页面使用了一个生产环境 ...

  2. vue开发常用插件

    dependencies axios // 用于请求数据 better-scroll // 用于处理页面列表的滚动,下拉刷新等 fastclick // 用于处理移动设备点击会有300毫秒延迟的问题 ...

  3. 🍓 移动端调试工具之vconsole的使用~ 🍓

    这里以在vue项目中的使用为例⬇️ 嗯模块化的. 不消多说,先cnpm install vconsole -S 然后在mian.js中配置之- ok啦-- 开发混合app的筒子,使用mac的话也有别的 ...

  4. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  5. vue.config.js

    const path = require('path'); const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入 移动端模拟 ...

  6. webpack 引用vconsole

    1.npm install -vconsole --save-dev 2.npm install -vconsele-webpack-plugin --save-dev 3.webpack.base. ...

  7. vconsole h5应用ajax请求抓包

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta co ...

  8. vue自定义指令v-scroll(directive)

    vue开发中,很多地方如果说都用到了某一方法,我们就可以进行指令化封装,通过自定义指令来实现这里通过两个例子说明vue-Directive的使用 1.v-focus 主要用来实现页面加载进来的时候文本 ...

  9. vue 项目 切换手机端和pc端。同一个项目,配置不同的路由

    1, 首先判断设备:在main.js里面写 // vue原型挂载 - 是否PC端 if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator. ...

  10. 用vue快速开发app的脚手架工具

    前言 多页面应用于结构较于简单的页面,因为简答的页面使用router又过于麻烦.本脚手架出于这样的场景被开发出来. 使用脚手架搭配Hbuilder也同样可以快速使用vue开发安卓和IOS APP. 本 ...

随机推荐

  1. Spring-Boot构建多模块项目

    Spring-Boot构建多模块项目 功能模块单独项目开发,可以将一个庞大的项目分解成多个小项目,便于细分开发 Maven多模块项目不能独立存在,必须有一个介质来包含. 1.创建一个Maven 项目, ...

  2. mui 卡片视图 遮罩蒙版

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. 强制不使用“兼容性视图”的HTML代码

    转自:http://www.weste.net/2013/8-9/93109.html 在IE8浏览器以后版本,都有一个"兼容性视图",让不少新技术无法使用.那么如何禁止浏览器自动 ...

  4. python文件派生

    import time class Foo: x = 1 def __init__(self, y): self.y = y def __getattr__(self, item): # 没有的情况下 ...

  5. java_BufferedReader的一个应用

    应用来自于我做网页的时候,来读出一个txt文档,由于输出到页面的时候总是没有排版,但是原文件中有换行符,之前是使用的byte数组传输,但是这样无法换行 就使用了BufferedReader,因为它是一 ...

  6. 使用阿里云公网ip建立bind,监听客户端连接失败

    bind: Cannot assign requested address 网上的众多答案不能解决我的问题 通过ping可以ping通,但是 使用bind代码,这个ip就是不能用的, 使用 ifcon ...

  7. TypeError: object() takes no parameters

    1.定义了类,在类中实现函数功能,但是需要传参数,我在类中没有建立__init__(self,) 导致没法传参.

  8. spark优化设置

    ->>>配置参数优化 SparkConf sc = new SparkConf().setAppName("com.sp.test.GroupTop3").set ...

  9. Java发送邮件功能

    package com.hd.all.test.testjava; import java.util.Properties; import javax.mail.Address; import jav ...

  10. Docker:镜像构建与进入容器总结

    构建镜像总结 docker构建镜像有两种方法: 1.使用docker commit + 容器 docker commit [OPTIONS] CONTAINER [REPOSITORY[:TAG]] ...