vue总引入VConsole

2023-11-14

  • 第一种,使用import的方式
    通过main.js中引入,先创建一个全局的vconsole.js
 import Vconsole from 'vconsole'
 const vConsole = new Vconsole()
 export default vConsole

然后在main.js中引入

import vConsole from '@/static/js/vconsole.js'
  • 第二种,通过js的方式引入,我是在app.vue中引入的
onShow: function() {
	this.initVConsole();
},
methods: {
	initVConsole() {
		const oScript = document.createElement('script');
		oScript.type = 'text/javascript';
		oScript.src = 'https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js';
		oScript.onload = this.initObj;
		document.body.appendChild(oScript);
	},
	initObj() {
		const vConsole = new VConsole();
		console.log('vconsole');
	}
}
  • 最后得到的效果

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue总引入VConsole 的相关文章

随机推荐

  • BeanUtils.copyProperties的使用方法

    BeanUtils copyProperties的使用方法 1 使用的是springframe包下的 BeanUtils copyProperties a b 把a属性拷贝给b属性 2 注意事项 使用时 例如 a和b都用page封装起来 P
  • STM32F103 内部FLASH读写擦操作

    内部flash介绍 开发步骤 1 解锁和锁定 前面我们介绍了在对 FLASH 进行写操作前必须先解锁 解锁操作也就是必 须在 FLASH KEYR 寄存器写入特定的序列 0X45670123 和 0XCDEF89AB 固件库 提供了一个解锁
  • nginx(六十七)http_ssl模块 client与nginx的ssl握手

    一 HTTPS握手机制 关注点 SSL TLS握手 的细节与nginx 配置指令 的关系 核心 讲解 客户端 下游 与作为 server 端的nginx之间的 握手 最佳实践 建议在 http块 中通过 include ssl conf 把
  • 01-pytest-安装及入门

    目录 1 安装 2 查看版本 3 创建第一个测试 4 pytest用例规则 1 安装 pip install U pytest 2 查看版本 pytest version 或 pip show pytest 3 创建第一个测试 1 新建te
  • 分享一个QTabWidget的好看样式

    void setTabWidgetStyleSheet QTabWidget obj obj gt setStyleSheet QTabWidget background color transparent QTabWidget pane
  • python rfind函数用法_纵经千万次增删改,初心永不变

    开篇 上一期介绍了字符串及其切片用法 相信你已经掌握 那么这一期 我们就来学习一下字符串的增删改查等一系列方法 正是因为有了这些方法 你才能像呼吸一样自然地操作字符串 需要指出的是 字符串是不可变类型 也就是说 只要一个字符串确定了 那么任
  • Navicat远程连接mysql数据库

    第一 首先能ping通mysql数据库所在的主机 第二 telnet mysql数据库的端口号 如果不行 要在防火墙 高级设置里面 配置入站规则 开放3306端口 第三 如果还不行 结合下面两个网址 http blog csdn net a
  • iOS进阶_Log分类打印日志自动转换中文

    description方法是NSObject类的一个实例方法 因此所有的Object C对象都有description方法 description方法返回的永远是字符串 对于一个Person类 如果没有重写description方法 NSL
  • DWR3常见错误解决方法

    1 提示 缺少对象 原因 程序中使用了dwr util setValue userInfo data 或getValues 之类的语句 而控件ID与这里的userInfo名字不匹配 则提示缺少对象 解决方法 检查每一个setValue中的控
  • 设置对象的键为一个变量

    在JS中将对象的键设为变量的方法是将对象的键用 包起来 否则会直接识别成键名 例如 var key mykey var num mynum let obj key num 上面代码创建后的对象是 key mynum 并不是我们所期望的 my
  • (CVPR2019医学影像)LesaNet配置

    目录 一 环境配置 1 下载CADLab中的LesaNet文件夹 2 roi pooling编译 3 预训练模型下载 二 数据集 三 配置参数 1 demo 2 训练 3 测试 作者原版github LesaNet 一 环境配置 1 下载C
  • 【STM32】系统时钟RCC详解(超详细,超全面)

    转载 https blog csdn net as480133937 article details 98845509 1什么是时钟 时钟是单片机运行的基础 时钟信号推动单片机内各个部分执行相应的指令 时钟系统就是CPU的脉搏 决定cpu速
  • 嵌入式毕业设计 基于红外热释电的房间人数计数系统 - 单片机 物联网嵌入式

    文章目录 0 前言 1 简介 2 主要器件 3 实现效果 4 设计原理 4 1 PIR传感器 4 2 mlx90614红外传感器 5 部分核心代码 6 最后 0 前言 这两年开始毕业设计和毕业答辩的要求和难度不断提升 传统的毕设题目缺少创新
  • 谈谈前后端分离

    1 首先我们先看看SPA SPA全称是single page application 单页面应用 它是一种网络应用程序 webAPP 模型 传统网站里面 不同页面的切换一般是直接从服务器加载一整个新页面 而SPA这个模型 则是通过动态的重写
  • AI根据视频画面自动配音 ,真假难辨 !(附数据集)

    本文经AI新媒体量子位 公众号ID qbitai 授权转载 转载请联系出处 本文长度为3216字 建议阅读7分钟 本文为你分享实现AI自动为视频配音的流程 先来做个 真假美猴王 的游戏 你将看到两段画面相同的视频 请判断哪段来自视频原声 哪
  • Golang goroutine MPG模式浅析

    协程是通过使用关键字 go 调用 或执行 一个函数或者方法来实现的 也可以是匿名函数 Go 语言在语言层面上支持了并发 goroutine是Go语言提供的一种用户态线程 有时我们也称之为协程 所谓的协程 某种程度上也可以叫做轻量线程 它不由
  • package有什么作用

    常见笔试题 下列说法中 正确的是 A Java 中包的主要作用是实现跨平台功能 B package 语句只能放在 import 语句后面 C 包 package 由一组类 class 和接口 interface 组成 D 可以用 inclu
  • 硬件面试题目

    1 请列举您知道的电阻 电容 电感品牌 最好包括国内 国外品牌 电阻 日本 muRata 村田 Panasonic 松下 ROHM 罗姆 susumu TDK 中国 YAGEO 国巨 FH 风华 电容 日本 Matsushita 松下 mu
  • Windows Git配置SSH

    进入桌面 或者文件管理中右键 gt 打开Git命令窗口 生成ssh keygen 命令 wolfs com 为你的Git账号 ssh keygen t rsa C wolfs com 必要信息有所打码 可自行更改 然后提示你输入密码进行验证
  • vue总引入VConsole

    第一种 使用import的方式 通过main js中引入 先创建一个全局的vconsole js import Vconsole from vconsole const vConsole new Vconsole export defaul