Vue2 plugin開發實戰之 X-Particles-Vue

啥也不說，上戰果：https://oxoyo.github.io/X-Par...

源碼解析：

Particles.vue

很簡單了，其實就是個普通的Vue component。

注意：
1.props：config 配置信息，定義的particles的效果，默認讀取 ./config.js
2.mounted: 注意須要在mounted函數裏初始化particlesJS，其餘如created函數裏particlesJS會找不見。

源碼：

<style scoped lang="less">
  .x-particles {}
</style>

<template>
  <div :id="id" class="x-particles"></div>
</template>

<script>
  import 'particles.js'
  import defConfig from './config.js'

  export default {
    name: 'x-particles',
    props: {
      id: {
        type: String,
        default: 'x-particles'
      },
      config: {
        type: Object,
        default: function () {
          return defConfig
        }
      }
    },
    mounted: function () {
      let _t = this
      if (!window.particlesJS) {
        console.log('particles.js has not load!')
        return
      }
      let config = {
        ...defConfig,
        ..._t.config
      }
      window.particlesJS(_t.id, config, function () {
        console.log('particles created!')
      })
    }
  }
</script>

index.js

vue plugin核心安裝文件。

注意：
1.防重標識：XParticles.installed 默認爲false。
2.註冊全局組件：Vue.component('x-particles', Particles)
3.實例註冊：

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(XParticles)
}

源碼：

import Particles from './Particles.vue'

const XParticles = {}

XParticles.installed = false
XParticles.install = function (Vue) {
  if (XParticles.installed) {
    return
  }

  Vue.component('x-particles', Particles)
  XParticles.installed = true
}

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(XParticles)
}

export default XParticles

config.js

默認配置文件，沒有用json文件，是考慮json規矩太多，還得寫好多引號。
沒啥說的，直接上源碼，具體配置見particles.js

源碼：

const config = {
  particles: {
    number: {
      value: 80,
      density: {
        enable: true,
        value_area: 800
      }
    },
    color: {
      value: '#9E9E9E'
    },
    shape: {
      type: 'circle',
      stroke: {
        width: 0,
        color: '#000000'
      },
      polygon: {
        nb_sides: 5
      },
      image: {
        src: 'img/github.svg',
        width: 100,
        height: 100
      }
    },
    opacity: {
      value: 0.5,
      random: false,
      anim: {
        enable: false,
        speed: 1,
        opacity_min: 0.1,
        sync: false
      }
    },
    size: {
      value: 3,
      random: true,
      anim: {
        enable: false,
        speed: 40,
        size_min: 0.1,
        sync: false
      }
    },
    line_linked: {
      enable: true,
      distance: 150,
      color: '#ffffff',
      opacity: 0.4,
      width: 1
    },
    move: {
      enable: true,
      speed: 2,
      direction: 'none',
      random: false,
      straight: false,
      out_mode: 'out',
      bounce: false,
      attract: {
        enable: false,
        rotateX: 600,
        rotateY: 1200
      }
    }
  },
  interactivity: {
    detect_on: 'canvas',
    events: {
      onhover: {
        enable: true,
        mode: 'grab'
      },
      onclick: {
        enable: true,
        mode: 'push'
      },
      resize: true
    },
    modes: {
      grab: {
        distance: 100,
        line_linked: {
          opacity: 1
        }
      },
      bubble: {
        distance: 400,
        size: 40,
        duration: 2,
        opacity: 8,
        speed: 3
      },
      repulse: {
        distance: 200,
        duration: 0.4
      },
      push: {
        particles_nb: 4
      },
      remove: {
        particles_nb: 2
      }
    }
  },
  retina_detect: true
}

export default config

發包：

package.json

包信息核心文件。

注意：
1.name：不可與npm庫中已有包重複。
2.version：包版本，每次發佈時更新新版本號。
3.keywords：關鍵詞，主要用於npm庫中搜索排名時用。
4.files：重中之重，意思發佈的包中會包含哪些目錄的文件。
5.main：重中之重，意思發佈的包別人在使用時的入口文件。

源碼：

{
  "name": "x-particles",
  "version": "1.0.7",
  "keywords": [
    "vue",
    "vue-plugin",
    "particles.js",
    "particles",
    "vue-particles"
  ],
  "description": "A Vue.js particles plugin base on particles.js",
  "author": "OXOYO <zmn2007.hi@163.com>",
  "license": "MIT",
  "files": [
    "dist",
    "example",
    "docs",
    "src"
  ],
  "main": "dist/XParticles.js",
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "lint": "eslint --ext .js,.vue src"
  },
  "dependencies": {
    "particles.js": "^2.0.0",
    "vue": "^2.2.6"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^3.19.0",
    "eslint-config-standard": "^6.2.1",
    "eslint-friendly-formatter": "^2.0.7",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^2.0.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^2.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "opn": "^4.0.2",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "ora": "^1.2.0",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "url-loader": "^0.5.8",
    "vue-loader": "^11.3.4",
    "vue-style-loader": "^2.0.5",
    "vue-template-compiler": "^2.2.6",
    "webpack": "^2.3.3",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

npm 發包

1.添加用戶，若是報錯按報錯信息修改便可。

$ npm adduser    
Username: your name
Password: your password
Email: yourmail

2.查看是否登陸成功

$ npm whoami

3.發佈

注意：
1.此處必定要把npm源切到官方源，大部分同窗都是用taobao的源，這樣直接發的話會報錯

npm ERR! no_perms Private mode enable, only admin can publish this module:

npm publish

4.版本更新

$ npm version 1.0.1
$ npm publish