The points and lines in the figure above are generated by Vue particles. They can not only move by themselves, but also interact with user mouse events.

1, Using the tutorial:

install

npm install vue-particles --save

In main JS add the following code:

import VueParticles from 'vue-particles'  
Vue.use(VueParticles)  

It can be used directly where it is used, as follows:

<template>
  <div id="app">
    <vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      >
      </vue-particles>
    <router-view></router-view>
  </div>
</template>
/*If you want to make a background picture, you can add a background picture directly to a class of the label*/

2, Attribute description

• color: String type. Default '#dede'. Particle color.
• Particleopacity: type number. The default is 0.7. Particle transparency.
• Particlesnumber: type number. The default is 80. Number of particles.
• shapeType: String type. Default 'circle'. The available particle appearance types are: circle, edge, triangle, polygon, star.
• Particlesize: type number. The default is 80. Individual particle size.
• linesColor: String type. Default '#dede'. Line color.
• Lineswidth: type number. Default 1. Line width.
• lineLinked: Boolean type. The default is true. Whether the connecting line is available.
• Lineopacity: type number. The default is 0.4. Line transparency.
• Linesdistance: type number. The default is 150. Line distance.
• Movespeed: type number. Default 3. Particle velocity.
• hoverEffect: Boolean type. The default is true. Whether there is a hover effect.
• hoverMode: String type. The default is true. The available hover modes are: "grab", "repurse", "bubble".
• clickEffect: Boolean type. The default is true. Whether there is click effect.
• clickMode: String type. The default is true. The available click modes are: "push", "remove", "reply", "bubble".

3, Problem solving

1. Problems and causes:

(1) Question:
After the project goes online, it is found that in the compatibility mode of 360 browser and QQ browser, the page is blank, and the browser will report:

image.png

(2) Causes:
The vue project uses a lot of es6 syntax, which can not be parsed by the IE kernel browser

2. Solution

(1) Download the Babel Polyfill module

npm install babel-polyfill -s

(2) Configure polyfill and add a babel.config.js file in the root directory

module.exports = {
  presets: [
    ['@vue/app', {
        useBuiltIns: 'entry'
    }]
  ]
}

(3) Entry file (main.js)

import '@babel/polyfill'

(4) Repackage the project to support es6 syntax
——————————————————————Split line -————————————————————

If the above problem is still not solved, it is the problem of Vue particles itself.
After searching everywhere on the Internet, I learned that node_modules depends on the Vue particles plug-in index. Downloaded in There is a problem with the JS file.

The file directory is shown in the following figure:

image.png

Original Vue particles / index JS code is as follows:

import particles from './vue-particles.vue'

const VueParticles = {
    install (Vue, options) {
        Vue.component('vue-particles', particles)
    }
}

export default VueParticles

IE does not support the write method of install() {}, so it is modified as follows:

import particles from './vue-particles.vue'

const VueParticles = {
    install: function (Vue, options) {
        Vue.component('vue-particles', particles)
    }
}

export default VueParticles

Finally, the project is repackaged and the problem is solved.