hello-world example like in the video

This commit is contained in:
Sébastien Chopin 2016-11-27 13:39:52 +01:00
parent a1ae04dad6
commit 34f46720c3
9 changed files with 91 additions and 41 deletions

View File

@ -1,7 +1,29 @@
const axios = require('axios')
module.exports = {
env: {
token: 'Hello :)',
num: 3,
bool: true
},
router: {
routes: [
{ name: 'user', path: '/users/:id', component: 'pages/_user' }
{ name: 'user', path: '/users/:id(\\d+)', component: 'pages/_user' }
]
},
build: {
vendor: ['axios']
},
generate: {
routeParams: {
'/users/:id(\\d+)': function () {
return axios.get('http://jsonplaceholder.typicode.com/users')
.then((res) => {
return res.data.map((user) => {
return { id: user.id }
})
})
}
}
}
}

View File

@ -1,11 +1,9 @@
{
"name": "nuxt-hello-world",
"name": "hello-nuxt",
"dependencies": {
"nuxt": "latest"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
"dev": "nuxt"
}
}

View File

@ -1,10 +1,5 @@
<template>
<div class="container">
<img src="~static/nuxt-black.png" />
<h2>Thank you for testing nuxt.js</h2>
<p>Loaded from the {{ name }}</p>
<p><router-link to="/">Back home</router-link></p>
</div>
<p>Hi from {{ name }}</p>
</template>
<script>
@ -16,21 +11,3 @@ export default {
}
}
</script>
<style scoped>
.container {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: black;
color: white;
font-family: "Lucida Console", Monaco, monospace;
padding-top: 130px;
text-align: center;
}
a {
color: silver;
}
</style>

View File

@ -1,15 +1,6 @@
<template>
<div class="container">
<img src="nuxt.png" />
<h2>Hello World.</h2>
<p><router-link to="/about">About</router-link></p>
<div>
<h1>Welcome!</h1>
<router-link to="/about">About page</router-link>
</div>
</template>
<style scoped>
.container {
font-family: sans-serif;
margin-top: 200px;
text-align: center;
}
</style>

View File

@ -0,0 +1,11 @@
{
"name": "nuxt-hello-world",
"dependencies": {
"nuxt": "latest"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
}
}

View File

@ -0,0 +1,36 @@
<template>
<div class="container">
<img src="~static/nuxt-black.png" />
<h2>Thank you for testing nuxt.js</h2>
<p>Loaded from the {{ name }}</p>
<p><router-link to="/">Back home</router-link></p>
</div>
</template>
<script>
export default {
data ({ req }) {
return {
name: req ? 'server' : 'client'
}
}
}
</script>
<style scoped>
.container {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: black;
color: white;
font-family: "Lucida Console", Monaco, monospace;
padding-top: 130px;
text-align: center;
}
a {
color: silver;
}
</style>

View File

@ -0,0 +1,15 @@
<template>
<div class="container">
<img src="nuxt.png" />
<h2>Hello World.</h2>
<p><router-link to="/about">About</router-link></p>
</div>
</template>
<style scoped>
.container {
font-family: sans-serif;
margin-top: 200px;
text-align: center;
}
</style>

View File

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB