vue项目安装使用vconsole方式
作者：船长在船上
这篇文章主要介绍了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'
页面效果：
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');
}
}最后得到的效果
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。