H5 page introduces vconsole, mobile H5 debugging and printing console method

In order to facilitate the debugging of H5 pages on mobile phones, vconsole can be imported and used. The following is the method of importing and using
Renderings:
insert image description here
insert image description here

1. npm installation

npm i vconsole -S

2. Create a vconsole.js file in the project and add the following content

import VConsole from 'vconsole'
const vconsole = new VConsole()
export default vconsole

As shown in the picture:
insert image description here

2. Configure global use in main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VConsole from './views/Login/vconsole'

import 'amfe-flexible' // 引入flexible.js,设置跟标签字体大小,做移动端适配
import {
    
     NavBar, Overlay, Button, Form, Field, Checkbox, CheckboxGroup, Dialog, Toast, Popup, PasswordInput, NumberKeyboard } from 'vant'

Vue.use(Button)
Vue.use(Overlay)
Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(Dialog)
Vue.use(Toast)
Vue.use(Popup)
Vue.use(PasswordInput)
Vue.use(NumberKeyboard)

Vue.config.productionTip = false


new Vue({
    
    
  VConsole,
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Guess you like

Origin blog.csdn.net/m0_47791238/article/details/131342990