vue项目安装使用vconsole方式
船长在船上 人气:0vue安装使用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'); } }
最后得到的效果
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容