使用particles.js制作酷炫的前端登录界面

最新推荐文章于 2023-05-17 11:26:52 发布

置顶

小菜鸟9527

最新推荐文章于 2023-05-17 11:26:52 发布

阅读量406

点赞数 4

文章标签： vue.js

本文链接：https://blog.csdn.net/xcneuq/article/details/116940427

版权

本文介绍了如何使用particles.js库结合Vue.js，创建一个吸引人的前端登录页面。首先通过npm安装particles.js及相关依赖，然后在main.js文件中进行注册。接着，创建particles.json配置粒子效果。最后，在Vue组件内部引入并展示这些效果。

摘要由CSDN通过智能技术生成

1.使用npm 安装依赖包并再main.js中注册

//可以使用npm依赖，也可以直接下载particles.js
npm install particles.js --save
//main.js
import particles from 'particles.js'

Vue.config.productionTip = false
Vue.use(VueRouter)
Vue.use(particles)

new Vue({
   
  el: '#app',
  router,
  store,
  components: {
    App },
  template: '<App/>'
}).$mount('#app')

2. 新建particles.json

//页面效果啥主要就是改这里面的参数，自己查找particles.js中文手册吧
{
   
  "particles": {
   
    "number": {
   
      "value": 30,
      "density": {
   
        "enable": true,
        "value_area": 1000
      }
    },
    "color": {
   
      "value": "random"
    },
    "shape": {
   
      "type": "circle",</