javascript - 似乎无法在我一直在研究的 vue.js 组合中获得正确的路由

标签 javascript vuejs2 vue-component vue-router

我正在从头开始构建我的作品集。一直使用库和代码片段，但 Vue 似乎是一个非常酷的框架，我想掌握它。回顾了基础知识和路由以及所有内容。我想做的第一件事是放置一个交互式背景，我正在使用它 - http://codepen.io/anandharne/pen/OpdrGE

Index.html 和 Index.js 以及 paths.js 文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>myportfolio</title>
</head>
<body>
<div id="app">
    <app>

     </app>

</div>
<!-- built files will be auto injected -->
</body>
</html>

import Vue from 'vue'
import Router from 'vue-router'
import routes from './routes' 

Vue.use(Router)

const router = new VueRouter({
mode: 'history',
routes,
});
export default router;

Hello.vue

    <template>

    <div id="aa_particles">



  </div>
</template>

<!-- Add 'scoped' attribute to limit CSS to this component only -->

<style>
#aa_particles
{
    z-index: 4;

    height: 100%;
    height: 100vh;

    background: #222;
}

</style>

<script src="particles.js"> 

var x = ('aa_particles', {
  'particles': {
    'number': {
      'value': 80,
      'density': {
        'enable': true,
        'value_area': 800
      }
    },
    'color': {
      'value': '#ffffff'
    },
    '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': 6,
      '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': 140,
        '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
})

</script>

目录结构 - /image/D71Z7.jpg

我应该通过代码创建一个新组件吗？以及如何将数据放入新实例的数据字段中？

还有一个文件particles.js，其数据可以在particles.js官方github上看到。由于声誉问题，无法发布另一个链接。任何帮助将不胜感激。

根据我的 friend 建议的代码

    <!-- <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>myportfolio</title>
  </head>
  <body>

        <app>

         </app>

    </div>
  <script src="../build.js"></script>
  </body>
</html>
 -->
 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>ParticleJS</title>
</head>
<body>
<div id="demo">
    <p> {{message}} </p>
    <input v-model="message">
</div>
<style type="text/css">

body {
  margin: 0;
  font:normal 75% Arial, Helvetica, sans-serif;
  background: #222;
}

canvas {
  display: block;
  vertical-align: bottom;
}

/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #b61924;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}


</style>
<script src="http://vuejs.org/js/vue.min.js"></script> 
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src ="main.js"></script>
</body>
</html>

ma​​in.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// /* eslint-disable */
// import Vue from 'vue'
// import Hello from './components/Hello.vue'
// import router from 'router'

// Vue.config.productionTip = false

// new Vue({

//   el: '#app',
//   router,
//   components: { Hello }

// })
/* eslint-disable */
var data = {
    message: 'Hello Vue.js!'
}

var demo = new Vue({
    el: '#demo',
    data: data,
    mounted(){
        console.log('mounted');
      particlesJS('demo', {
  "particles": {
    "number": {
      "value": 380,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "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": 6,
      "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": 140,
        "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
});
    }
})

最佳答案

如果您要在所有应用程序上使用导引粒子.js背景，那么您可以在根组件上初始化它，并在index.html上加载导引粒子.js

这是一个使用 vue 的 Particle.js 示例。

var data = {
    message: 'Hello Vue.js!'
}

var demo = new Vue({
    el: '#demo',
    data: data,
    mounted(){
    	console.log('mounted');
      particlesJS('demo', {
  "particles": {
    "number": {
      "value": 380,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "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": 6,
      "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": 140,
        "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
});
    }
})
/* ---- reset ---- */

body {
  margin: 0;
  font:normal 75% Arial, Helvetica, sans-serif;
  background: #bada55;
}

canvas {
  display: block;
  vertical-align: bottom;
}

/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #b61924;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>ParticleJS</title>
</head>
<body>
<div id="demo">
    <p>{{message}}</p>
    <input v-model="message">
</div>
<script src="http://vuejs.org/js/vue.min.js"></script> 
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</body>
</html>

如示例所示，您应该在 mounted 钩子(Hook)上初始化 Particle.js。 最初还尝试在不使用路由的情况下创建单个页面，然后当您有更多页面时添加路由。并确保阅读官方文档。 https://router.vuejs.org/en/

关于javascript - 似乎无法在我一直在研究的 vue.js 组合中获得正确的路由，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43192693/

上一篇：JavaScript 正则表达式 - 删除填充表格单元格后的空表格单元格

下一篇：javascript - 将成员变量的状态存储在 Angular 2 类中

相关文章：

javascript - 想要在 joomla chronoforms 中使用 javascript 创建定期存款计算器(季)

javascript - AngularJS $resource GET 中的多个参数

javascript - Vue.js v-for 循环的正确随机排序

javascript - v-for 中的 Vue 动态 v-model

javascript - 如何在js中插入一些链接来解决双引号单引号问题？

javascript - 使用 momentjs 从固定日期查找下星期一

javascript - 如何异步获取语言环境(nuxt.js + i18n + axios)

vue.js - 子路由组件不在 vue js 中呈现

javascript - 如何禁用输入类型数字上的所有点？ vue.js 2

vue.js - 已分配计算属性 'name' 但它没有 setter (没有 v-model)

©2024 IT工具网  联系我们