Merge branch 'dev' into refacto-app

This commit is contained in:
Sébastien Chopin 2017-10-28 10:21:47 +02:00
commit b3a1844f6f
18 changed files with 194 additions and 141 deletions

View File

@ -254,4 +254,4 @@ Note: we recommend putting `.nuxt` in `.npmignore` or `.gitignore`.
https://github.com/nuxt/nuxt.js/projects/1 https://github.com/nuxt/nuxt.js/projects/1
## Contributing ## Contributing
Please see our [contributing.md](./contributing.md) Please see our [CONTRIBUTING.md](./CONTRIBUTING.md)

View File

@ -17,10 +17,11 @@ const argv = parseArgs(process.argv.slice(2), {
s: 'spa', s: 'spa',
u: 'universal' u: 'universal'
}, },
boolean: ['h', 's', 'u'], boolean: ['h', 's', 'u', 'build'],
string: ['c'], string: ['c'],
default: { default: {
c: 'nuxt.config.js' c: 'nuxt.config.js',
build: true
} }
}) })
@ -36,6 +37,7 @@ if (argv.help) {
--universal Launch in Universal mode (default) --universal Launch in Universal mode (default)
--config-file, -c Path to Nuxt.js config file (default: nuxt.config.js) --config-file, -c Path to Nuxt.js config file (default: nuxt.config.js)
--help, -h Displays this message --help, -h Displays this message
--no-build Just run generate for faster builds when just dynamic routes changed. Nuxt build is needed before this command.
`) `)
process.exit(0) process.exit(0)
} }
@ -62,7 +64,13 @@ debug('Generating...')
const nuxt = new Nuxt(options) const nuxt = new Nuxt(options)
const builder = new Builder(nuxt) const builder = new Builder(nuxt)
const generator = new Generator(nuxt, builder) const generator = new Generator(nuxt, builder)
generator.generate()
const generateOptions = {
init: true,
build: argv['build']
}
generator.generate(generateOptions)
.then(() => { .then(() => {
debug('Generate done') debug('Generate done')
process.exit(0) process.exit(0)

View File

@ -1,16 +1,26 @@
module.exports = function (options) { module.exports = function(options) {
// Extend build // Extend build
this.extendBuild((config) => { this.extendBuild(config => {
const tsLoader = {
loader: "ts-loader",
options: {
appendTsSuffixTo: [/\.vue$/]
}
};
// Add TypeScript loader // Add TypeScript loader
config.module.rules.push({ config.module.rules.push(
test: /\.ts$/, Object.assign(
loader: 'ts-loader' {
}) test: /((client|server)\.js)|(\.tsx?)$/
},
tsLoader
)
);
// Add TypeScript loader for vue files // Add TypeScript loader for vue files
for (let rule of config.module.rules) { for (let rule of config.module.rules) {
if (rule.loader === 'vue-loader') { if (rule.loader === "vue-loader") {
rule.query.loaders.ts = 'ts-loader?{"appendTsSuffixTo":["\\\\.vue$"]}' rule.options.loaders.ts = tsLoader;
} }
} }
}) });
} };

View File

@ -22,5 +22,5 @@ module.exports = {
build: { build: {
vendor: ['axios', 'gsap', 'vuex-class', 'nuxt-class-component'] vendor: ['axios', 'gsap', 'vuex-class', 'nuxt-class-component']
}, },
modules: ['~modules/typescript'] modules: ['~/modules/typescript']
} }

View File

@ -4,12 +4,15 @@
"dependencies": { "dependencies": {
"axios": "^0.16.1", "axios": "^0.16.1",
"gsap": "^1.19.1", "gsap": "^1.19.1",
"nuxt": "^1.0.0-alpha2", "nuxt": "latest",
"nuxt-class-component": "^1.0.1", "nuxt-class-component": "^1.0.3",
"tachyons": "^4.7.0", "tachyons": "^4.7.0",
"vue-class-component": "^5.0.1", "vue": "~2.5.1",
"vue-property-decorator": "^5.0.1", "vue-server-renderer": "~2.5.1",
"vuex-class": "^0.2.0" "vue-template-compiler": "~2.5.1",
"vue-class-component": "^6.0.0",
"vue-property-decorator": "^6.0.0",
"vuex-class": "^0.3.0"
}, },
"scripts": { "scripts": {
"dev": "nuxt", "dev": "nuxt",
@ -18,7 +21,7 @@
"generate": "nuxt generate" "generate": "nuxt generate"
}, },
"devDependencies": { "devDependencies": {
"ts-loader": "^2.0.3", "ts-loader": "^3.0.0",
"typescript": "^2.2.2" "typescript": "^2.2.2"
} }
} }

View File

@ -16,7 +16,7 @@
<script lang="ts"> <script lang="ts">
import Vue from "vue"; import Vue from "vue";
import Component from "nuxt-class-component" import Component from "nuxt-class-component"
import Card from "~components/Card" import Card from "~/components/Card"
import { State, Getter } from "vuex-class" import { State, Getter } from "vuex-class"
@Component({ @Component({

View File

@ -1,4 +1,4 @@
import axios from "~plugins/axios"; import axios from "~/plugins/axios";
export const state = () => ({ export const state = () => ({
selected: 1, selected: 1,

View File

@ -8,7 +8,6 @@
"module": "es2015", "module": "es2015",
"moduleResolution": "node", "moduleResolution": "node",
"experimentalDecorators": true, "experimentalDecorators": true,
"declaration": true,
"noImplicitAny": false, "noImplicitAny": false,
"noImplicitThis": false, "noImplicitThis": false,
"strictNullChecks": true, "strictNullChecks": true,
@ -16,14 +15,15 @@
"suppressImplicitAnyIndexErrors": true, "suppressImplicitAnyIndexErrors": true,
"allowSyntheticDefaultImports": true, "allowSyntheticDefaultImports": true,
"baseUrl": ".", "baseUrl": ".",
"allowJs": true,
"paths": { "paths": {
"~": ["./"], "~/": ["./"],
"~assets/*": ["./assets/*"], "~/assets/*": ["./assets/*"],
"~components/*": ["./components/*"], "~/components/*": ["./components/*"],
"~middleware/*": ["./middleware/*"], "~/middleware/*": ["./middleware/*"],
"~pages/*": ["./pages/*"], "~/pages/*": ["./pages/*"],
"~plugins/*": ["./plugins/*"], "~/plugins/*": ["./plugins/*"],
"~static/*": ["./static/*"] "~/static/*": ["./static/*"]
} }
} }
} }

View File

@ -2,7 +2,7 @@
"name": "nuxt-vue-apollo", "name": "nuxt-vue-apollo",
"dependencies": { "dependencies": {
"@nuxtjs/apollo": "^2.1.1", "@nuxtjs/apollo": "^2.1.1",
"nuxt": "^1.0.0-rc9" "nuxt": "latest"
}, },
"scripts": { "scripts": {
"dev": "nuxt", "dev": "nuxt",

View File

@ -0,0 +1,40 @@
<template>
<div>
<input v-model="msg">
<p>msg: {{msg}}</p>
<p>env: {{env}}</p>
<p>computed msg: {{computedMsg}}</p>
<button @click="greet">Greet</button>
<p><nuxt-link to="/about">About page</nuxt-link></p>
</div>
</template>
<script>
import Vue from 'vue'
import Component from 'nuxt-class-component'
@Component({
props: {
env: String
}
})
export default class Base extends Vue {
// initial data
msg = 123
// lifecycle hook
mounted () {
this.greet()
}
// computed
get computedMsg () {
return 'computed ' + this.msg
}
// method
greet () {
console.log('base greeting: ' + this.msg)
}
}
</script>

View File

@ -0,0 +1,23 @@
<template>
<div>
<input v-model="msg">
<p>msg: {{msg}}</p>
<p>env: {{env}}</p>
<p>computed msg: {{computedMsg}}</p>
<button @click="greet">Greet</button>
<p><nuxt-link to="/about">About page</nuxt-link></p>
</div>
</template>
<script>
import Component from 'nuxt-class-component'
import Base from '@/components/Base'
@Component
export default class Child extends Base {
// override parent method
greet () {
console.log('child greeting: ' + this.msg)
}
}
</script>

View File

@ -2,9 +2,6 @@ module.exports = {
build: { build: {
babel: { babel: {
plugins: ['transform-decorators-legacy', 'transform-class-properties'] plugins: ['transform-decorators-legacy', 'transform-class-properties']
},
extend (config) {
config.resolve.alias['nuxt-class-component'] = '~plugins/nuxt-class-component'
} }
} }
} }

View File

@ -4,7 +4,7 @@
"babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-decorators-legacy": "^1.3.4",
"nuxt": "latest", "nuxt": "latest",
"vue-class-component": "^5.0.1" "nuxt-class-component": "^1.0.4"
}, },
"scripts": { "scripts": {
"dev": "nuxt", "dev": "nuxt",

View File

@ -1,3 +1,6 @@
<template> <template>
<h1>About</h1> <div>
<h1>About</h1>
<p><nuxt-link to="/">Home page</nuxt-link></p>
</div>
</template> </template>

View File

@ -1,41 +1,18 @@
<template> <template>
<div> <Child :env="env" ></Child>
<input v-model="msg">
<p>msg: {{msg}}</p>
<p>env: {{env}}</p>
<p>computed msg: {{computedMsg}}</p>
<button @click="greet">Greet</button>
<p><nuxt-link to="/about">About page</nuxt-link></p>
</div>
</template> </template>
<script> <script>
import Vue from 'vue' import Vue from 'vue'
import Component from 'nuxt-class-component' import Component from 'nuxt-class-component'
import Child from '@/components/Child'
@Component() @Component({
components: { Child }
})
export default class App extends Vue { export default class App extends Vue {
// initial data
msg = 123
asyncData ({ req }) { asyncData ({ req }) {
return { env: req ? 'server' : 'client' } return { env: req ? 'server' : 'client' }
} }
// lifecycle hook
mounted () {
this.greet()
}
// computed
get computedMsg () {
return 'computed ' + this.msg
}
// method
greet () {
console.log('greeting: ' + this.msg)
}
} }
</script> </script>

View File

@ -1,14 +0,0 @@
import Component from 'vue-class-component'
Component.registerHooks([
'beforeRouteEnter',
'beforeRouteLeave',
'asyncData',
'fetch',
'middleware',
'layout',
'transition',
'scrollToTop'
])
export default Component

View File

@ -5,7 +5,7 @@ import hash from 'hash-sum'
import pify from 'pify' import pify from 'pify'
import webpack from 'webpack' import webpack from 'webpack'
import serialize from 'serialize-javascript' import serialize from 'serialize-javascript'
import { join, resolve, basename, dirname } from 'path' import { join, resolve, basename, extname, dirname } from 'path'
import Tapable from 'tappable' import Tapable from 'tappable'
import MFS from 'memory-fs' import MFS from 'memory-fs'
import webpackDevMiddleware from 'webpack-dev-middleware' import webpackDevMiddleware from 'webpack-dev-middleware'
@ -62,8 +62,11 @@ export default class Builder extends Tapable {
get plugins () { get plugins () {
return this.options.plugins.map((p, i) => { return this.options.plugins.map((p, i) => {
if (typeof p === 'string') p = { src: p } if (typeof p === 'string') p = { src: p }
p.src = this.nuxt.resolvePath(p.src) return {
return { src: p.src, ssr: (p.ssr !== false), name: `plugin${i}` } src: this.nuxt.resolvePath(p.src),
ssr: (p.ssr !== false),
name: basename(p.src, extname(p.src)).replace(/[^a-zA-Z?\d\s:]/g, '')
}
}) })
} }

View File

@ -73,11 +73,14 @@ export default class Generator extends Tapable {
})) }))
} }
// Copy /index.html to /200.html for surge SPA const indexPath = join(this.distPath, 'index.html')
// https://surge.sh/help/adding-a-200-page-for-client-side-routing if (existsSync(indexPath)) {
const _200Path = join(this.distPath, '200.html') // Copy /index.html to /200.html for surge SPA
if (!existsSync(_200Path)) { // https://surge.sh/help/adding-a-200-page-for-client-side-routing
await copy(join(this.distPath, 'index.html'), _200Path) const _200Path = join(this.distPath, '200.html')
if (!existsSync(_200Path)) {
await copy(indexPath, _200Path)
}
} }
const duration = Math.round((Date.now() - s) / 100) / 10 const duration = Math.round((Date.now() - s) / 100) / 10