1. 首页
  2. web前端
  3. Vue

vue项目使用vconeols

目前移动端Web开发越来越大众普遍,越来越多的前段框架技术都支持移动端兼容和适配,但是不得不说,移动端开发过程中要在手机上调试真的很麻烦,毕竟手机浏览器不能像在 PC 上一样,直接F12就弹出调试器,看到我们再控制台输出的调试信息,有时万般无奈只能使用alert来输出,这真是一个痛点!
  腾讯的 vConsole 插件能帮我们解决这个问题!

目前移动端Web开发越来越大众普遍,越来越多的前段框架技术都支持移动端兼容和适配,但是不得不说,移动端开发过程中要在手机上调试真的很麻烦,毕竟手机浏览器不能像在 PC 上一样,直接F12就弹出调试器,看到我们再控制台输出的调试信息,有时万般无奈只能使用alert来输出,这真是一个痛点!
腾讯的 vConsole 插件能帮我们解决这个问题!

下载 安装

首先需要下载 vConsole 的最新版本,或者直接使用 npm 安装:

npm install vconsole

然后复制 dist/vconsole.min.js 到自己的项目中。接着就是将这个插件引入到项目中:
1、使用 script 来直接直接引入 vConsole 模块。单页面应用直接在入口Html文件的 <hean></hean> 中引入:

<head>
     <script src="path/to/vconsole.min.js"></script>
      <script>
            var vConsole = new VConsole();
     </script>
</head>

注意:这里的path/to/指的是vconsole.min.js文件的路径,多页面应用要在需要进行调试的每个页面都引入。
2、在入口js文件中使用 require() 引入模块:

var VConsole = require('path/to/vconsole.min.js');
var vConsole = new VConsole();

上面第一行代码只是引入了vConsole的原型,并不会直接在页面插入调试器,需要第二行代码来实例化一个VConsole对象才可以,所以注意,一定要手动进行实例化。
3、如果是在Vue-cli项目里,那先安装vConsole到dependencies中 npm install vconsole,然后在main.js中引入:

import vConsole from "vconsole"
const vconsole = new vConsole()
Vue.use(vconsole)

按照上面的方法就可以再移动端进行调试了,需要更加详细地了解vConsole,可以去GitHub上看文档

本文来自投稿,不代表 怪小克 立场,如若转载,请注明出处:https://wangchaoke.cn/?p=322

本站发布的内容若侵犯到您的权益,请邮件联系 860095347@qq.com 删除,我们将及时处理!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

860-095-347

在线咨询:点击这里给我发消息

邮件:860095347@@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code