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 <[e-mail]>",
  "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