vue项目安装使用vconsole方式

目录

• vue安装使用vconsole
• vue总引入vconsole
• 第一种：使用import的方式
• 第二种：通过js的方式引入，我是在app.vue中引入的

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'

页面效果：

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');
    }
}

最后得到的效果

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

原文地址：https://blog.csdn.net/SmartJunTao/article/details/122305960