今日在尝试开发一个登录界面时,发现背景是一张图片挺平平无奇,为了让界面更加炫酷,学习使用粒子插件vue-particles
简介: vue 登录页背景-粒子特效(Vue-Particles) 上图中的点和线,是由Vue-Particles生成的,不仅自己动,还可以与用户的鼠标互动。例子的样式有点丑,大家凑合看一下吧。 1. 使用教程 1.1 安装 npm install vue-particles --save-dev 1.2 引入 main.js 文件 import Vue from 'vue' import VueParticles from '...
1、 安装vue-particles插件 npm install vue-particles --save 2、在main.js引入插件 import Vuefrom'vue'import VueParticlesfrom'vue-particles'Vue.use(VueParticles) 3.直接在需要的地方使用插件 <template><vue-particlescolor="#dedede":particleOpacity="0.7":particlesNumber="80"shapeType="circle":particle...
在Vue项目中使用particles特效,可以遵循以下步骤来实现: 安装particles.vue库: 首先,你需要安装particles.vue库。这可以通过npm或yarn来完成。 bash npm install particles.vue --save 或者 bash yarn add particles.vue 在Vue项目中导入particles.vue组件: 安装完成后,你需要在Vue项目中导入particles.vue组件。这通...
实际的开发过程中,对于登录页,往往需要一些动态的页面的页面效果。vue-particles的使用,不仅可以动态变化,还能与鼠标产生互动效果。 具体的实现步骤如下: 1.安装插件: npm install vue-particles --save 2.main.js中使用插件: import VueP
npm 链接 https://www.npmjs.com/package/particles.vue3 GitHub地址 https://github.com/tsparticles/vue3 配置参数说明: color: String类型 默认’#dedede’。粒子颜色。 particleOpacity: Number类型 默认0.7。粒子透明度。 particlesNumber: Number类型 默认80。粒子数量。
npm install vue-particles --save 在main.js内导入 importVueParticlesfrom'vue-particles'Vue.use(VueParticles) 在Login.vue内插入代码 <vue-particles color="#409EFF":particleOpacity="0.7":particlesNumber="80"shapeType="circle":particleSize="4"linesColor="#409EFF":linesWidth="1":lineLinked="true...
Vue.use(VueParticles) 1. 2. 在Login.vue内插入代码 <vue-particles color="#409EFF" :particleOpacity="0.7" :particlesNumber="80" shapeType="circle" :particleSize="4" linesColor="#409EFF" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" ...
npm install particles.js --save 在Vue 组件中引入并初始化: 代码语言:txt 复制 <template> </template> import particlesJS from 'particles.js'; export default { name: 'ParticleBackground', mounted() { this.initParticlesJS(); }, methods: { initParticlesJS() { particlesJS('particles-js'...
npm install particles.vue3npm install tsparticles 2. 可选择全局引入main.js //导入粒子库import Particles from "particles.vue3";//use 注册createApp(App) .use(Particles) .mount("#app"); 3. 在使用粒子库的页面,例如Login.vue <template>