feat: 💡第一版

Author: zhouzhechao

.eslintrc.js

@@ -13,5 +13,6 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-plusplus': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
   },
 };

.npmignore

@@ -0,0 +1,7 @@
+examples/
+public/
+node_modules
+
+vue.config.js
+babel.config.js
+*.map

README.md

@@ -1,24 +1,42 @@
-# vue-firework
+## vue-firework
 
-## Project setup
-```
-yarn install
-```
+> To use the firework component developed by vue, click on the component.
+> 
+Vue 版的点击页面出现火花效果，可以全局也用，也可以在单个元素中使用。
 
-### Compiles and hot-reloads for development
-```
-yarn serve
-```
 
-### Compiles and minifies for production
-```
-yarn build
+### demo
+
+
+### install
+
+```sh
+# npm 
+npm install vue-firework --save
+# yarn
+yarn add vue-firework
 ```
 
-### Lints and fixes files
+### import and use
+
+Import for global usage
+```js
+import Vue from 'vue'
+import VueFirework from 'vue-firework'
+
+Vue.use(VueFirework)
 ```
-yarn lint
+Or on a single component
+```js
+import VueFirework from 'vue-firework'...
+components: { VueFirework }
+...
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+### config
+* el. The element that needs to bind firework effects.
+* fireCanvasStyle. Configuration of firework left and top properties.
+
+### todo
+- Custom color
+### MIT

example/App.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="container">
+    <VueFirework></VueFirework>
+
+    <div class="intro">
+      <h1>To use the firework component developed by vue, click on the component.</h1>
+      <p>Try clicking on the screen</p>
+    </div>
+
+    <h2>🔥props</h2>
+    <li>[el].   The element that needs to bind firework effects.</li>
+    <li>[fireCanvasStyle].   Configuration of firework left and top properties.</li>
+
+    <h2>🎉use</h2>
+    <li>yarn add vue-firework</li>
+    <li>import Vue from 'vue'</li>
+    <li>import VueFirework from 'vue-firework'</li>
+  </div>
+</template>
+
+<script>
+import VueFirework from '../src/firework.vue';
+
+export default {
+  components: { VueFirework },
+};
+</script>
+
+<style>
+html,
+body {
+  height: 100%;
+  font-family: "Pacifico", cursive;
+  font-family: "Fredoka One", cursive;
+}
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.container {
+  /* width: 600px; */
+  height: 600px;
+  color: #162447;
+  /* background-color: #f8b195; */
+}
+
+.intro {
+  text-align: center;
+}
+</style>

example/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import App from './App.vue';
+
+Vue.config.productionTip = false;
+
+new Vue({
+  render: (h) => h(App),
+}).$mount('#app');

package.json

@@ -1,13 +1,15 @@
 {
   "name": "vue-firework",
   "version": "0.1.0",
-  "private": true,
+  "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "lib": "vue-cli-service build --target lib --name vue-fi --dest lib ./src/main.js"
   },
   "dependencies": {
+    "animejs": "^3.2.0",
     "core-js": "^3.6.4",
     "vue": "^2.6.11"
   },
@@ -21,5 +23,18 @@
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-vue": "^6.2.2",
     "vue-template-compiler": "^2.6.11"
-  }
+  },
+  "author": "[email protected]",
+  "description": "To use the firework component developed by vue, click on the component.",
+  "keywords": [ 
+    "vue",
+    "firework",
+    "vue-firework"
+  ],
+  
+  "repository": {
+    "type": "git",
+    "url": "项目的git地址"
+  },
+  "license": "MIT"
 }

public/index.html

@@ -6,6 +6,10 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Pacifico&display=swap" rel="stylesheet">
+
+
   </head>
   <body>
     <noscript>