mirror of
https://github.com/nuxt/nuxt.git
synced 2025-01-19 09:55:53 +00:00
hello-world example like in the video
This commit is contained in:
parent
a1ae04dad6
commit
34f46720c3
@ -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 }
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
11
examples/static-images/package.json
Normal file
11
examples/static-images/package.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "nuxt-hello-world",
|
||||
"dependencies": {
|
||||
"nuxt": "latest"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "nuxt",
|
||||
"build": "nuxt build",
|
||||
"start": "nuxt start"
|
||||
}
|
||||
}
|
36
examples/static-images/pages/about.vue
Normal file
36
examples/static-images/pages/about.vue
Normal 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>
|
15
examples/static-images/pages/index.vue
Normal file
15
examples/static-images/pages/index.vue
Normal 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>
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
Loading…
Reference in New Issue
Block a user