概述
啥也不说，上战果：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 XParticlesconfig.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: yourmail2.查看是否登录成功
$ npm whoami 3.发布
注意：
1.此处一定要把npm源切到官方源，大部分同学都是用taobao的源，这样直接发的话会报错
npm ERR! no_perms Private mode enable, only admin can publish this module:npm publish4.版本更新
$ npm version 1.0.1
$ npm publish最后
以上就是优秀枫叶为你收集整理的 Vue2 plugin开发实战之 X-Particles-Vue的全部内容，希望文章能够帮你解决 Vue2 plugin开发实战之 X-Particles-Vue所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复