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

最后得到的效果

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

赞 (0)

相关推荐

  • VUE安装使用教程详解

    如果是简单实用vue的话,可以直接引用js文件. https://vuejs.org/js/vue.js 但是在构建大型项目的时候推荐使用NPM安装,NPM能够很好的和诸如webpack或Browserify模块打包器配合使用,同时Vue也提供配套工具来开发单文件组件. 1. 安装nodejs 由于npm(nodejs package manager)是nodejs的包管理器,所以要首先安装nodejs,从官网下载相应版本安装即可https://nodejs.org/en/download/.

  • vue-devtools的安装和使用步骤详解

    1.下载压缩包,github下载地址:https://github.com/vuejs/vue-devtools 2.解压此文件夹 3.用命令提示符或编译器进入此文件夹 4.在文件夹下依次运行(可以在命令提示符窗口也可在编译器中): I.npm install安装所需要的依赖 II.npm run build构建(如果未执行此步,shells->chrome文件夹下会缺少build文件夹) 5.在shells->chrome->manifest.json文件中修改 background

  • 移动端调试神器vConsole使用详解

    目录 介绍 功能特性 使用 方法一:使用 npm(推荐) 方法二:使用 CDN 直接插入到 HTML 开发环境显示生成环境删除 vue案例 介绍 平时在web应用开发过程中,我们可以console.log去输出一些信息或者看接口返回的信息及接口性能等情况,但是在移动端,也就是在手机上,我们是看不到的. 这种情况下,可以选择使用alert弹出一些信息,但是这种方法不怎么方便,也会阻断JS线程,导致后面的线程都不执行.也影响调试体验. 那么,如果将console.log应用到移动端呢?需要借助第三方

  • 超级详细的Vue安装与配置教程

    超级详细的Vue安装与配置教程

    目录 一.下载和安装Vue 二.创建全局安装目录和缓存日志目录 三.配置环境变量 1. 环境变量---用户变量---选中Path---点编辑 2. 环境变量---系统变量---新建 三.安装vue 1. 安装vue.js 2. 安装webpack模板 3. 安装脚手架vue-cli 4. 安装vue-router 四.我的第一个的 vue-cli应用程序 总结 一.下载和安装Vue 官网下载地址Download | Node.js 选择适合自己的版本,推荐LTS,长久稳定版本. 我这里选择的是W

  • 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.

  • 当启动vue项目安装依赖时报错的解决方案

    目录 启动vue项目安装依赖报错 暂时想到四个原因 vue必备安装依赖 1.elementUI 2.安装sass 3.安装axios 4.安装vuex 5.安装js-cookie 启动vue项目安装依赖报错 当启动vue项目安装依赖时报错 暂时想到四个原因 1.node版本低,升级到新版本 2.执行npm cache clean,再重新npm install 3.如果是下载依赖包失败的话,可以使用cnpm淘宝镜像下载,或者yarn下载安装 4.报错一般都会有错误提示,根据错误提示进行操作 vue

  • vue项目安装scss常见报错处理方式

    目录 安装sass依赖 问题原因 解决方案 安装sass依赖 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 第一种:Module build failed: TypeError: this.getResolve is not a function 如果运行之后项目报错 Module build failed: TypeError: this.getReso

  • vue项目中引入js-base64方式

    目录 vue引入js-base64 1.安装md5依赖 2.在需要使用md5的组件中使用直接使用md5 使用Base64编码解码 1.下载包 2.在你需要解码(编码)的文件中引用 3.使用方法 vue引入js-base64 1.安装md5依赖 npm install --save js-base64 或者 cnpm install --save js-base64 2.在需要使用md5的组件中使用直接使用md5 let Base64 = require('js-base64').Base64;

  • vue项目base64转img方式

    vue项目base64转img方式

    目录 base64转img方式 效果展示 base64和jpg/png互转 base64的转换 base64转img方式 输入框:       <el-input         class="input-box"         ref="elInputText"         type="textarea"         v-model="content"         @paste.native="

  • Vue项目安装插件并保存

    Vue项目安装插件并保存

    比如安装jszip插件的命令行如下: npm install jszip --save-dev 只有执行了--save-dev 才会将当前安装的插件版本保存在package.json文件中 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面相关链接

  • vue项目依赖升级报错处理方式

    目录 vue项目依赖升级报错处理 当启动vue项目安装依赖时报错 vue项目依赖升级报错处理 1.Vue Router 升级到3.5.1报错:Navigation cancelled from "/login" to "/" with a new navigation 原因:Vue Router内部报错没有进行catch处理导致的编程式导航跳转问题,往同一地址跳转时会报错,push和replace 都会导致这个情况的发生 import Vue from 'vue'

  • 详解vue项目构建与实战

    详解vue项目构建与实战

    前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易懂的API和数据绑定的功能也为其揽获了不少用户.本文主要讲解vue项目的构建与实战,因此不会太多涉及其API和语法部分,旨在帮助vue的入门级用户了解从零开始构建vue项目的步骤和方法. vue项目分类 首先,在构建一个vue项目之前我们需要了解vue项目的分类,这里我主要将其分为两类:(1)直接引入vue.js文件 (2)使用vue单文件组件 按以上两类来看,直接引入vue.js文件就像页

  • vue-cli构建vue项目的步骤详解

    构建一个 vue 项目最简单的方式就是使用脚手架工具 vue-cli .前端的三大框架都有自己的脚手架工具,其作用就是用配置好的模板迅速搭建起一个项目工程来,省去自己配置 webpack 配置文件的基本内容,大大降低了初学者构建项目的难度.这节我们看看如何使用 vue-cli 构建 vue 项目以及对构建项目的具体分析. 一.环境搭建 node 和 npm 是必不可少的,这里不再介绍. 1.安装 vue-cli $ npm install -g vue-cli 检查是否安装成功: $ vue -

  • vue项目创建步骤及路由router

    vue项目创建步骤及路由router

    1.创建一个vue项目步骤 (windows环境下).创建vue项目前,检查系统是否具备创建项目的条件(是否已经安装好了node.js.webpack.vue-cli).cmd打开终端. 1.1 如果还没安装node.js, 则先安装node.js,安装完成后,查看node版本 node -v 1.2 安装淘宝镜像, 安装完成后查看npm版本:npm -v npm install -g cnpm --registry=https://registry.npm.taobao.org 1.3 安装w

随机推荐