vue-particles粒子插件的使用

vue-particles粒子插件的使用

1. vue-particles的安装

npm install vue-particles --save-dev

2. vue-particles如何在vue项目中导入
   在main.js中文件中全局引入vue-particles

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

3. vue-particles的使用

<template>
    <div id="app">
		<vue-particles 
			color="#fff" 
			:particleOpacity="0.7" 
			:particlesNumber="30" 
			shapeType="star" 
			:particleSize="5"
		    linesColor="#fff"
		    :linesWidth="2" 
		    :lineLinked="true" 
		    :lineOpacity="0.4" 
		    :linesDistance="150" 
		    :moveSpeed="3"
		    :hoverEffect="true" 
		     hoverMode="grab" 
		     :clickEffect="true" 
		     clickMode="push">
		</vue-particles>
    </div>
 </template>

各个属性的作用的话可以参照官方文档进行学习，或者GitHub上进行学习。如果想要添加背景图的话，可以给vue-partivles添加一个class，然后设置相应的背景图片。以上vue-particles的设置效果如下：

vue-particles粒子插件如何兼容IE

以上效果是在chrome中打开的，但是当你在IE中打开的时候，你会发现页面一片空白，打开控制面板，报错如下：

SCRIPT: 缺少':'

解决方法：
首先找到vue-particles/index.js文件，目录如下

node_modules --> vue-particles --> src --> vue-particles -->index.js

原index.js代码如下：

/* 20200920 Created By Qiaozi */
/* eslint-disable */
import particles from './vue-particles.vue'

const VueParticles = {
    
    

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

}

export default VueParticles
/* eslint-disable */

因为在IE中不支持 install() {} 这样的写法，故将原index.js文件修改如下：

/* 20200920 Created By Qiaozi */
/* eslint-disable */
import particles from './vue-particles.vue'

const VueParticles = {
    
    

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

}

export default VueParticles
/* eslint-disable */

此时在IE浏览器中打开便不会一片空白啦。