似乎无法在我一直致力于的 vue.js 投资组合中获得正确的路由
Cant seem to get the routing right in this vue.js portfolio I have been working on
我正在努力从头开始构建我的投资组合。一直使用库和代码片段，但 Vue 似乎是一个非常酷的框架，我想掌握它。回顾了基础知识和路由以及所有内容。我要做的第一件事是放置一个我正在使用的交互式背景 - http://codepen.io/anandharne/pen/OpdrGE
Index.html 和 Index.js 和 routes.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>
目录结构 - http://imgur.com/a/dSsez
我应该通过代码创建一个新组件吗？以及如何将数据放入新实例的数据字段中？
还有一个文件particles.js，其数据可以在particles.js官方github看到。由于声誉问题，不能 post 另一个 link。任何帮助将不胜感激。
根据我的朋友建议的代码
<!-- <!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>
main.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
});
}
})
如果您要在所有应用程序上使用 particle.js 背景，那么您可以在根组件上对其进行初始化，然后在 index.html[=15= 上加载 particle.js ]
这里是 particle.js 使用 vue 的例子。
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 挂钩上初始化 particle.js。
最初也尝试在不使用路由的情况下创建单个页面，然后当您有更多页面时添加路由。并确保阅读官方文档。 https://router.vuejs.org/en/
我正在努力从头开始构建我的投资组合。一直使用库和代码片段，但 Vue 似乎是一个非常酷的框架，我想掌握它。回顾了基础知识和路由以及所有内容。我要做的第一件事是放置一个我正在使用的交互式背景 - http://codepen.io/anandharne/pen/OpdrGE
Index.html 和 Index.js 和 routes.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>
目录结构 - http://imgur.com/a/dSsez
我应该通过代码创建一个新组件吗？以及如何将数据放入新实例的数据字段中？
还有一个文件particles.js，其数据可以在particles.js官方github看到。由于声誉问题，不能 post 另一个 link。任何帮助将不胜感激。
根据我的朋友建议的代码
<!-- <!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>
main.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
});
}
})
如果您要在所有应用程序上使用 particle.js 背景，那么您可以在根组件上对其进行初始化，然后在 index.html[=15= 上加载 particle.js ]
这里是 particle.js 使用 vue 的例子。
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 挂钩上初始化 particle.js。
最初也尝试在不使用路由的情况下创建单个页面，然后当您有更多页面时添加路由。并确保阅读官方文档。 https://router.vuejs.org/en/