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 如果有出現(xiàn)版本號證明安裝成功
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)建一個全局的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');
?? ?}
}最后得到的效果
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中@click綁定多個事件問題(教你避坑),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家介紹了Transition內(nèi)置組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
vue3?hook重構(gòu)DataV的全屏容器組件詳解
這篇文章主要為大家介紹了vue3?hook重構(gòu)DataV的全屏容器組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要介紹了Vue中的循環(huán)及修改差值表達式的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了解決vue表單為空也能提交的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
一篇文章帶你吃透Vue生命周期(結(jié)合案例通俗易懂)
這篇文章主要給大家介紹了關(guān)于如何通過一篇文章帶你吃透Vue生命周期，文章通過結(jié)合案例更加的通俗易懂,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了Vue 打包體積優(yōu)化方案小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
基于Vue-Cli 打包自動生成/抽離相關(guān)配置文件的實現(xiàn)方法
基于Vue-cli 項目產(chǎn)品部署，涉及到的交互的地址等配置信息，每次都要重新打包才能生效，極大的降低了效率。這篇文章主要介紹了基于Vue-Cli 打包自動生成/抽離相關(guān)配置文件 ,需要的朋友可以參考下2018-12-12
vue使用echarts圖表自適應(yīng)的幾種解決方案
這篇文章主要給大家介紹了關(guān)于vue使用echarts圖表自適應(yīng)的幾種解決方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vuejs通過filterBy、orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)
這篇文章主要為大家詳細介紹了vuejs通過filterBy、orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02