vue项目安装使用vconsole方式

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

vue项目安装使用vconsole方式

船长在船上   2022-11-22 我要评论

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

最后得到的效果

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

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们