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

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

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

使用方法:

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

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

2.main.js中引入:

// 因为vConsole并不需要调用,
// 所以前面加“eslint-disable no-unused-vars”规避掉eslint语法检查 /* eslint-disable no-unused-vars */
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. requirejs配置问题

    <script src="lib/requirejs/require.js " data-main="js/main.js"> </scrip ...

  2. Python学习之旅(七)

    Python基础知识(6):基本数据类型之列表 在Python中,最基本的数据结构是序列.序列中的每个元素被分配一个序号——即元素的位置,也称为索引.第一个索引从0开始,如果要从右边开始,序列中的最后 ...

  3. EasyUI combogrid/combobox过滤时限制只能选择现有项

    在使用EasyUI的combogrid时可以通过输入进行过滤,达到快速选择的目的,但是手工输入不存在的项也不会出错,结果提交到数据库后就会产生错误. 比如idField是int型的,输入的数据通过是检 ...

  4. python开发 *进程数据隔离.守护进程,进程同步工具 * 180725

    进程数据隔离.守护进程,进程同步工具 一.进程之间的数据隔离: from multiprocessing import Process n=100 #主程序中变量n= def func(): glob ...

  5. [人工智能] 安装python jupyter

    1.  什么是python jupyter ? 简单的说,可以理解为一个IDE. http://jupyter.org/ 2.  安装python jupyter notebook http://ju ...

  6. Linux学习5-CentOS安装Python3.6环境和pip3

    前言 centos7 自带有 python,但是却是 python2 版本的 python,如果你想安装个python3怎么办呢? 如果直接删除python2的话,可能会引起其他的问题,因为有些东西是 ...

  7. Visual Studio 2017使用Asp.Net Core构建Angular4应用程序

    文章转载请著名出处:http://www.cnblogs.com/smallprogram 你需要了解的名词 1. NodeJS,这是一个基于Chrome V8 JavaScript引擎构建的Java ...

  8. 5.0-uC/OS-III时间管理

    1.时间管理 uC/OS-III为用户提供了与时间管理相关的服务. 在uC/OS-III中设置了能提供时基中断的中断源.该中断源提供 10Hz 到 1000Hz 之间的中断(需设置OS_CFG_APP ...

  9. js篇-解析url链接里面的参数名和参数值

    项目背景是,链接为:https://paladin.pingan.com.cn/jf/?appId=PA00200000000_01_APP&id=123456#/fundRank 要求拿到: ...

  10. 点击当前选项显示当前内容jquery

    <script language="javascript"> $(document).ready(function(){ $(".moren a") ...