This is the second day of my November challenge

Most of my own projects use a technology stack in the VUE direction, so the following basic uses are readily available.

But before we get to that, we need to learn two things:

1. Run the vUE project on the mobile terminal, because it would be troublesome to package and upload it if we conduct mobile debugging, so we can run the VUE project directly on the mobile terminal device to show it
2. Print the log on the non-PC side, because we are debugging. On the PC side, we can print the log in Chrome F12 debug mode, but not on the mobile side. Here are two ways to print logs on mobile devices.

Mobile display vUE project

The premise is connected in the same wifi or local area network, if there is no condition to open the mobile phone hot spot can also be

Steps:

1. invue.config.jsIs configured as follows

Module. exports = {devServer: {host: '0.0.0.0',}}Copy the code

2. Run the VUE project

3. Use the address of network to open in the mobile browser

Logs are generated on the mobile terminal

Solution a:vconsole

download

//npm

npm install vconsole



//yarn

yarn add vconsole
Copy the code

The introduction of

import VConsole from 'vconsole'
Copy the code

use

const vConsole = new VConsole(); // or init with options const vConsole = new VConsole({ maxLogNumber: 1000 }); // Call console.log('Hello world') directly as usual; // remove it when you finish debugging vConsole.destroy();Copy the code

test

Success will display the logo as shown

Scheme 2:Eruda

Eruda is relatively friendlier than VConsole

If you want more detailed configuration, you can link to the gitHub page

download

//npm

npm install eruda --save



yarn

yarn add eruda --save
Copy the code

The introduction of

Import eruda from 'eruda' // initialize eruda.init()Copy the code

use

The console. The log () 'test eruda'Copy the code

extension

If you do not want to import through NPM, you can directly use CDN to import

Paste the following code into public/index.html and print it directly

Importing a graphical icon that displays the figure successfully

Judge cell phone, computer, iPad

Scheme 1: Navigator. userAgent

This is a native JS statement that can be used directly

Test MAC, iPad, OpPO phone, if

Const device = navigator. UserAgent if (device.indexof ('iPad') > 1) {/ / the} else if (device. The indexOf (' Android ') > 1 | | device. The indexOf (' ios) > 1) {/ / phone} else {} / / computerCopy the code

The above test is done by myself, but it may not be suitable for all models. If a friend has done the test by himself, he can give feedback for modification and improvement

Now we use the JS library to determine the device

Scheme 2:device.js

The steps developed in the VUE project are as follows

download

//npm

npm install current-device



//yarn

yarn add current-device
Copy the code

Introduced the main. Js

import device from 'current-device'
Copy the code

use

Call the method directly

If (device.mobile()) {console.log(' mobile phone ')} else if (device.ipad()) {console.log(' iPad ')} else if (device.desktop()) {console.log(' computer ')}Copy the code

Reference methods (invoked and judged according to their own needs)

DEVICE SUPPORT

• iOS: iPhone, iPod, iPad

• Android: Phones & Tablets

• Blackberry: Phones & Tablets

• Windows: Phones & Tablets

• Firefox OS: Phones & Tablets