vue項(xiàng)目安裝使用vconsole方式
更新時(shí)間：2022年11月17日 15:16:43 作者：船長(zhǎng)在船上
這篇文章主要介紹了vue項(xiàng)目安裝使用vconsole方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue安裝使用vconsole
1.安裝
npm install vconsole --save
如果安裝不成功，可選擇使用cnpm
cnpm安裝使用淘寶鏡像：
npm install -g cnpm --registry=https://registry.npm.taobao.org //cnpm -v 如果有出現(xiàn)版本號(hào)證明安裝成功
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中引入，先創(chuàng)建一個(gè)全局的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');
?? ?}
}最后得到的效果
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue2.0數(shù)據(jù)雙向綁定與表單bootstrap+vue組件
這篇文章主要介紹了vue2.0數(shù)據(jù)雙向綁定與表單bootstrap+vue組件,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了vue2.x中monaco-editor的使用說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vite項(xiàng)目搭建與環(huán)境配置的完整版教程
Vite?使用?Rollup?作為默認(rèn)的構(gòu)建工具,可以將應(yīng)用程序的源代碼打包成一個(gè)或多個(gè)優(yōu)化的靜態(tài)文件,本文就來為大家介紹一下Vite如何進(jìn)行項(xiàng)目搭建與環(huán)境配置吧2023-09-09
vue中使用element ui的input框?qū)崿F(xiàn)模糊搜索的輸入框
這篇文章主要介紹了vue中使用element ui的input框?qū)崿F(xiàn)模糊搜索的輸入框,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了Vue之請(qǐng)求如何傳遞參數(shù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
詳解如何實(shí)現(xiàn)Element樹形控件Tree在懶加載模式下的動(dòng)態(tài)更新
這篇文章主要介紹了詳解如何實(shí)現(xiàn)Element樹形控件Tree在懶加載模式下的動(dòng)態(tài)更新，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
有些時(shí)候客戶希望產(chǎn)品使用他們公司要求的字體,這個(gè)時(shí)候我們需要將客戶提供的字體文件引入到項(xiàng)目中,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目導(dǎo)入字體文件的方法步驟,需要的朋友可以參考下2024-03-03
基于Vue2x實(shí)現(xiàn)響應(yīng)式自適應(yīng)輪播組件插件VueSliderShow功能
本文講述的是從開發(fā)一款基于Vue2x的響應(yīng)式自適應(yīng)輪播組件插件的一個(gè)全過程，包含發(fā)布到npm，構(gòu)建自己的npm包，供下載安裝使用的技巧,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05
深度了解vue.js中hooks的相關(guān)知識(shí)
這篇文章主要介紹了深度了解vue.js中hooks的相關(guān)知識(shí)，生命周期鉤子提供了一些 方法 ，因此你可以在組件生命周期的不同時(shí)刻精確地觸發(fā)某些操作。當(dāng)我們將組件實(shí)例化時(shí)，組件會(huì)被創(chuàng)建，反之會(huì)被銷毀。,需要的朋友可以參考下2019-06-06
關(guān)于對(duì)keep-alive的理解,使用場(chǎng)景以及存在的問題解讀
這篇文章主要介紹了關(guān)于對(duì)keep-alive的理解,使用場(chǎng)景以及存在的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05