Vue CLI + VUE +vConsole/eruda 在移动端进行调试

最新推荐文章于 2024-04-28 16:57:10 发布
最新推荐文章于 2024-04-28 16:57:10 发布
阅读量1k 收藏 2
点赞数 2
分类专栏： JavaScript vue.js 学习笔记 文章标签： vue debug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36570464/article/details/109271012
版权

Vue CLI + VUE +vConsole/eruda 在移动端进行调试

Vue CLI + VUE +vConsole/eruda 在移动端进行调试

eruda

  1. 安装
    npm install eruda --save
  2. 使用
    在main.js 文件中引用
    import eruda from ‘eruda’
    eruda.init()

vConsole

1、npm install vconsole
2.使用(不是唯一的方法，还有很多)
在这里插入图片描述
3. 除了可以添加到window中，也可以挂载到vue中，
在这里插入图片描述

在这里插入图片描述

bubbleTg
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
electron-vue + vue-cli + element-ui 实时热更新版v12.0.4框架.rar
05-06
electron-vue + vue-cli + element-ui 实时热更新版，electronv12.0.4框架，打包好的框架，拿来即用，实时热更新，提高开发3倍效率
【Vue】vue小工具，vue移动端h5页面使用小齿轮控制台，移动端项目打开控制台
qq_51055690的博客
12-08 1130
手机端h5，在app内打开控制台，显示控制台。设置变量
eruda操作
豪哥的博客
10-24 2446
eruda操作
非常强大的移动端调试神器-Eruda
最新发布
Superxpang的博客
04-28 354
之前有出过一篇在react项目中安装eruda的教程，此篇针对Vue项目，欢迎大家批评指正！
移动端调试工具 vconsole、eruda 使用方法
MISS_zhang_0110的博客
07-28 1634
【代码】移动端调试工具 vconsole、eruda 使用方法。
【vue2】vue全家桶介绍，学习vue必备
嗨，朋友你好！我是前端领域的工作者
03-16 5770
vue全家桶介绍包括vue介绍、vue-cli、vue-router、vuex、axios、UI框架
vue3 移动端调试工具vconsole和eruda 及其两种使用方式
arrow.light的博客
02-25 3011
vue3 移动端调试工具vconsole和eruda 及其两种使用方式。tip：eruda和Chrome浏览器的从console台很像，推荐使用。
Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole）
仙魁XAN
04-09 7594
Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole） 目录 Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole） 一、简单介绍 二、Eruda 1、安装 2、使用 3、实用 三、vConsole 1、安装 2、使用 3、实用 四、关键代码 五、CDN 方式使用 Eruda 、vConsole 六、其他 一、简单介绍 Vue 开发的一些知识整理，方便后期遇到类似...
vue+cli+ts项目实战.rar
04-02
在这个“vue+cli+ts项目实战”中，我们将探讨如何结合TypeScript来提升项目的类型安全性和可维护性，以及如何利用view-design、moment和echarts等库来实现功能丰富的应用。 首先，TypeScript是JavaScript的一个超集...
vue3+Vant+pinia 开箱即用，移动端框架
01-30
vue3+Vant+pinia移动端框架： 1、已集成搭建适配方法：postcss-pxtorem || lib-flexible； 2、已安装最新路由搭建框架； 3、使用sass样式处理； 4、已集成nprogress进度条并全局配置； 5、安装最新pinia插件，配合...
tsVant:vue3.0 + typeScript + vant做的h5移动端页面
03-25
`npm run serve`启动开发服务器，提供实时刷新功能，方便开发者在开发过程中查看改动效果，这通常基于Vue CLI的热模块替换（HMR）功能。 `npm run build`用于构建生产环境版本，会进行代码压缩和优化，确保部署到...
详解vue-cli + webpack 多页面实例应用
08-30
在现实项目中，大部分项目都是多页的，但 vue-cli 主要是用于构建单页应用的脚手架。为了解决这个问题，我们可以通过修改vue-cli的配置文件来实现多页面实例应用。 四、项目结构 项目结构主要包括以下几个部分： ...
vue 使用 eruda
qq_31706077的博客
09-02 885
eruda
vue 使用 eruda（移动端H5调试工具）
qq_46302247的博客
01-05 503
【代码】vue 使用 eruda（移动端H5调试工具）
web移动端调试神器Eruda
现场喷口水的专栏
09-08 5889
在Web开发过程中，对html页面进行开发和调试的时候都会用到浏览器提供的调试工具，小编我最常用的就是Chrome浏览器自带的开发者工具了，可以很方便的对JS代码进行断点调试，log也很方便。但是在移动端的浏览器上进行开发就没有这么方便了，不管是iOS的Safari还是Android的众多浏览器。在这里小编推荐一个移动端的调试神器Eruda。 Eruda 是一个专为手机网页前端设计的调试面板，类...
【Vue3】eruda移动端控制台调试工具+动态引入（html通用）
cnsv的博客
02-02 769
【Vue3】eruda移动端控制台调试工具+动态引入（html通用）
Vue 中使用 Eruda 来调起手机端的控制台
小火车况且况且况且的博客
05-27 2629
Vue 中使用 Eruda 来调起手机端的控制台 Eruda的github地址 使用方法，这里推荐使用CDN的方式 在BootCDN中搜索eruda 直接复制整个 script的标签 在项目的index.html中引入，注意如果项目上线记得注释<script src="https://cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.min.js"></script> <script>eruda.init()</script
eruda.js 移动端调试神器使用教程（eruda）
宋坚强大大~~
09-03 6748
在日常的移动端开发时，一般都是试用chrome浏览器的移动端模式进行开发和调试，只有在chrome调试完成，没有问题了才会上到真机测试，移动端开发的一大问题就在于此， 各种品牌各种型号手机，手机中各种类型的浏览器APP........还好移动端的相对一致点，但是往往都会有一些各种各样的坑，这时候就蛋疼了，明明chrome调试工具中是正常的， 一到某个浏览器中就炸了，怎么办，又无法像在chro...
vue3+Vue cli+element-plus
05-14
Vue 3 是 Vue.js 框架的最新版本，它带来了许多新特性和改进，比如性能提升、Composition API、TypeScript 支持等。Vue CLI 是官方提供的脚手架工具，可以帮助我们快速搭建 Vue 项目，提供了许多开箱即用的特性，比如热重载、代码分割、自动化测试等。Element Plus 是一套基于 Vue 3 的 UI 组件库，它是对 Element UI 的升级版，提供了更好的性能和更丰富的组件。 使用 Vue CLI 创建一个 Vue 3 项目，然后安装 Element Plus： ```bash # 创建 Vue 3 项目 vue create my-project # 安装 Element Plus npm install element-plus --save ``` 在项目中使用 Element Plus 的组件，需要先在 main.js 中引入组件库： ```js import { createApp } from 'vue'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; import App from './App.vue'; const app = createApp(App); app.use(ElementPlus); app.mount('#app'); ``` 然后就可以在组件中使用 Element Plus 的组件了，比如在 App.vue 中使用 Button 组件： ```vue <template> <div> <el-button>Click me</el-button> </div> </template> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值