普通純html使用粒子效果只要導入相關的particles.js以及app.js的配置文件就好。
現在開始說兩種vue使用粒子的方式，一個是純js配置引入，另外一個是用vue-particles插件使用。
一、純js的引入使用方式：
一般particles.js以及相關樣式的配置文件都是放在項目目錄src/assets/js中。我們在需要使用到的頁面中使用import方式導入particles.js文件，然後把普通html的樣式配置改爲使用export default的方式導出，然後在使用的頁面也同樣使用import導入—這個改引入方式網上很多都沒說，導致很多人不知道怎麼引入配置文件。
然後就需要在mounted鉤子方法中使用，以及在beforeDestroy中銷燬，這個銷燬也是網上很多都沒有提到的。
mounted() {
// 初始化例子插件
particlesJS("login", config);
},
beforeDestroy() {
// 銷燬 particlesJS
// thanks https://github.com/d2-projects/d2-admin/issues/65
// ref https://github.com/VincentGarreau/particles.js/issues/63
if (pJSDom && pJSDom.length > 0) {
pJSDom[0].pJS.fn.vendors.destroypJS();
pJSDom = [];
}
},
在html的代碼塊中需要添加對應的 <div id="particles-js" ></div> 這裏的id應該是配置文件中定義的，改爲export方式沒看到，但確實需要用到。另外如果要添加背景圖片可以在css樣式中 #particles-js 去設置。
二、使用vue-particles的實現方式：
在項目路徑中去npm install vue-particles --save-dev，然後在main.js中去import 以及vue.use去加載使用，在html代碼塊中使用即可使用，這個是最簡單的配置。https://github.com/creotip/vue-particles
http://vue-particles.netlify.com/
最後付上自己上傳樣式配置文件以及一個純html的demo下載地址：https://download.csdn.net/download/u012138137/10941052 ----------原本是想把積分改爲最低爲1的，但是上傳時發現改不了。。。
如果有問題還請指出，謝謝！！！