8000 Merge pull request #65 from ckpiggy/nuxt_generate · javascriptit/examples-1@8114c49 · GitHub
[go: up one dir, main page]
Skip to content

Commit 8114c49

Browse files
petersirkapetersirka
authored
Merge pull request totaljs#65 from ckpiggy/nuxt_generate
example of nuxt generate static files
2 parents 4900029 + e0b8699 commit 8114c49

File tree

8 files changed

+148
-0
lines changed

8 files changed

+148
-0
lines changed

‎nuxt-generate/README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
```
2+
npm install
3+
node index.js
4+
```
5+
and open another terminal window
6+
```
7+
npm run generate
8+
```
9+
this command with generate static file store in `./publci`,
10+
then you can go to `locahost:8000` to see the result

‎nuxt-generate/controllers/api/default.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
exports.install = function () {
2+
F.route('/api/hello_msg', hello_json)
3+
}
4+
5+
function hello_json () {
6+
this.json({msg: 'Hello from API'})
7+
}

‎nuxt-generate/controllers/default.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const path = require('path')
2+
const fs = require('fs')
3+
const publicDir = path.join( __dirname, '..' , CONFIG('directory-public'))
4+
exports.install = function () {
5+
const reg = /^(?!\/api)[/A-Za-z0-9_.]*$/
6+
/*
7+
* Test url, if not start with '/api' then use nuxt middleware to handle the request
8+
* */
9+
F.route('/', index)
10+
F.file((url)=>{return reg.test(url.uri.path)}, nuxt)
11+
}
12+
13+
function index () {
14+
const filePath = path.join( publicDir, 'index.html')
15+
this.res.file(filePath)
16+
}
17+
18+
function nuxt (req, res) {
19+
const fileName = req.url
20+
const filePath = path.join(publicDir, fileName)
21+
const read = fs.createReadStream(filePath)
22+
read.pipe(res)
23+
//I don't know why there will be syntax error if I use res.file(filePath), but native node js is fine.
24+
}

‎nuxt-generate/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
const options = {port: 8000, ip:'127.0.0.1'}
2+
require('total.js').http('debug',options)

‎nuxt-generate/nuxt.config.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
build:{
3+
vendor: ['axios']
4+
},
5+
srcDir: 'nuxt/',
6+
generate: {
7+
dir: 'public',
8+
}
9+
}

‎nuxt-generate/nuxt/pages/index.vue

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<div>
3+
<h3>Hello from Total.js and Nuxt.js</h3>
4+
<div class="container">
5+
<p>Value from server</p>
6+
<p>{{serverMsg}}</p>
7+
</div>
8+
<div class="container">
9+
<p>These values are React</p>
10+
<input :value="msg" @input="(e)=>{setMsg(e.target.value)}"/>
11+
<p>{{msg}}</p>
12+
<p>counter: {{counter}}</p>
13+
<button @click="decrease">-</button><button @click="increase">+</button>
14+
</div>
15+
</div>
16+
</template>
17+
<script>
18+
import {mapState, mapMutations} from 'vuex'
19+
import axios from 'axios'
20+
export default {
21+
computed: {
22+
...mapState(['msg', 'counter', 'serverMsg'])
23+
},
24+
methods: {
25+
...mapMutations(['setMsg', 'increase', 'decrease'])
26+
},
27+
fetch: function ({store}) {
28+
return axios.get('http://localhost:8000/api/hello_msg').then(function (res) {
29+
store.commit('setServerMsg', res.data.msg)
30+
}).catch(function (e) {
31+
console.log(e)
32+
})
33+
}
34+
}
35+
</script>
36+
<style scoped>
37+
.container {
38+
padding: 0 20px 20px 20px;
39+
margin: 10px;
40+
border-color: darkgray;
41+
border-style: solid;
42+
border-radius: 5px;
43+
border-width: 1px;
44+
display: inline-block;
45+
width: 50%;
46+
}
47+
</style>

‎nuxt-generate/nuxt/store/index.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Vuex from 'vuex'
2+
3+
const store = function () {
4+
return new Vuex.Store({
5+
state: {
6+
msg: '',
7+
counter: 0,
8+
serverMsg: ''
9+
},
10+
mutations: {
11+
setMsg: function (state, msg){
12+
state.msg = msg
13+
},
14+
increase: function (state) {
15+
state.counter += 1
16+
},
17+
10682 decrease: function (state) {
18+
state.counter -= 1
19+
},
20+
setServerMsg: function (state, msg) {
21+
state.serverMsg = msg
22+
}
23+
}
24+
})
25+
}
26+
27+
export default store

‎nuxt-generate/package.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "nuxt-generate",
3+
"version": "1.0.0",
4+
"description": "integrating total.js and nuxt.js",
5+
"main": "index.js",
6+
"scripts": {
7+
"generate": "node_modules/.bin/nuxt generate",
8+
"test": "echo \"Error: no test specified\" && exit 1"
9+
},
10+
"keywords": [
11+
"total.js",
12+
"nuxt.js",
13+
"vue.js"
14+
],
15+
"author": "ckpiggy",
16+
"license": "MIT",
17+
"dependencies": {
18+
"axios": "0.16.2",
19+
"nuxt": "next",
20+
"total.js": "^2.6.3-3"
21+
}
22+
}

0 commit comments

Comments
 (0)
0