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'
页面效果：
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');
}
}最后得到的效果
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue2.0数据双向绑定与表单bootstrap+vue组件
这篇文章主要介绍了vue2.0数据双向绑定与表单bootstrap+vue组件,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
这篇文章主要介绍了vue2.x中monaco-editor的使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Vite 使用 Rollup 作为默认的构建工具,可以将应用程序的源代码打包成一个或多个优化的静态文件,本文就来为大家介绍一下Vite如何进行项目搭建与环境配置吧2023-09-09
vue中使用element ui的input框实现模糊搜索的输入框
这篇文章主要介绍了vue中使用element ui的input框实现模糊搜索的输入框,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
这篇文章主要介绍了Vue之请求如何传递参数问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
这篇文章主要介绍了详解如何实现Element树形控件Tree在懒加载模式下的动态更新，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
有些时候客户希望产品使用他们公司要求的字体,这个时候我们需要将客户提供的字体文件引入到项目中,下面这篇文章主要给大家介绍了关于Vue项目导入字体文件的方法步骤,需要的朋友可以参考下2024-03-03
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
本文讲述的是从开发一款基于Vue2x的响应式自适应轮播组件插件的一个全过程，包含发布到npm，构建自己的npm包，供下载安装使用的技巧,非常不错，具有一定的参考借鉴价值，感兴趣的朋友跟随脚本之家小编一起看看吧2018-05-05
这篇文章主要介绍了深度了解vue.js中hooks的相关知识，生命周期钩子提供了一些 方法 ，因此你可以在组件生命周期的不同时刻精确地触发某些操作。当我们将组件实例化时，组件会被创建，反之会被销毁。,需要的朋友可以参考下2019-06-06
关于对keep-alive的理解,使用场景以及存在的问题解读
这篇文章主要介绍了关于对keep-alive的理解,使用场景以及存在的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
最新评论