vue项目安装使用vconsole方式

更新时间：2022年11月17日 15:16:43 作者：船长在船上

这篇文章主要介绍了vue项目安装使用vconsole方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue安装使用vconsole

1.安装

npm install vconsole --save

如果安装不成功，可选择使用cnpm

cnpm安装使用淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org
//cnpm -v  如果有出现版本号证明安装成功

2.新建vconsole.js

import VConsole from 'vconsole';
let vconsole = new VConsole();
export default vconsole;

3.main.js引入

import vConsole from './vconsole'

页面效果：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAVGhlIGNhcHRhaW4ncw==,size_8,color_FFFFFF,t_70,g_se,x_16

vue总引入vconsole

第一种：使用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');
    }
}

最后得到的效果

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解VUE的状态控制与延时加载刷新
本篇文章主要介绍了详解VUE的状态控制与延时刷新，实例分析了数据延时到展示的时候再去刷新的技巧，有兴趣的可以了解一下。
2017-03-03
Vue入门实战之天气预报
这篇文章主要为大家详细介绍了Vue入门实战之天气预报，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
详解Vue组件之间通信的七种方式
这篇文章主要介绍了Vue组件之间通信的七种方式,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
浅谈Vue 自动化部署打包上线
这篇文章主要介绍了浅谈Vue 自动化部署打包上线，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
vue使用拖拽方式创建结构树
这篇文章主要为大家详细介绍了vue使用拖拽方式创建结构树，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
前端vue-cli项目中使用img图片和background背景图的几种方法
这篇文章主要介绍了前端vue-cli项目中使用img图片和background背景图的几种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
vue 数组添加数据方式
这篇文章主要介绍了vue 数组添加数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue数据响应式原理知识点总结
在本篇文章里小编给各位整理的是一篇关于vue数据响应式原理知识点总结，有兴趣的朋友们可以跟着学习下。
2020-02-02
vue3使用自定义指令实现el dialog拖拽功能示例详解
这篇文章主要为大家介绍了vue3使用自定义指令实现el dialog拖拽功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
解决vue中el-tab-pane切换的问题
这篇文章主要介绍了解决vue中el-tab-pane切换的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07