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
## 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',
u: 'universal'
},
boolean: ['h', 's', 'u'],
boolean: ['h', 's', 'u', 'build'],
string: ['c'],
default: {
c: 'nuxt.config.js'
c: 'nuxt.config.js',
build: true
}
})
@ -36,6 +37,7 @@ if (argv.help) {
--universal Launch in Universal mode (default)
--config-file, -c Path to Nuxt.js config file (default: nuxt.config.js)
--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)
}
@ -62,7 +64,13 @@ debug('Generating...')
const nuxt = new Nuxt(options)
const builder = new Builder(nuxt)
const generator = new Generator(nuxt, builder)
generator.generate()
const generateOptions = {
init: true,
build: argv['build']
}
generator.generate(generateOptions)
.then(() => {
debug('Generate done')
process.exit(0)

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -2,7 +2,7 @@
"name": "nuxt-vue-apollo",
"dependencies": {
"@nuxtjs/apollo": "^2.1.1",
"nuxt": "^1.0.0-rc9"
"nuxt": "latest"
},
"scripts": {
"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: {
babel: {
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-decorators-legacy": "^1.3.4",
"nuxt": "latest",
"vue-class-component": "^5.0.1"
"nuxt-class-component": "^1.0.4"
},
"scripts": {
"dev": "nuxt",

View File

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

View File

@ -1,41 +1,18 @@
<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>
<Child :env="env" ></Child>
</template>
<script>
import Vue from 'vue'
import Component from 'nuxt-class-component'
import Child from '@/components/Child'
@Component()
@Component({
components: { Child }
})
export default class App extends Vue {
// initial data
msg = 123
asyncData ({ req }) {
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>

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 webpack from 'webpack'
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 MFS from 'memory-fs'
import webpackDevMiddleware from 'webpack-dev-middleware'
@ -62,8 +62,11 @@ export default class Builder extends Tapable {
get plugins () {
return this.options.plugins.map((p, i) => {
if (typeof p === 'string') p = { src: p }
p.src = this.nuxt.resolvePath(p.src)
return { src: p.src, ssr: (p.ssr !== false), name: `plugin${i}` }
return {
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
// https://surge.sh/help/adding-a-200-page-for-client-side-routing
const _200Path = join(this.distPath, '200.html')
if (!existsSync(_200Path)) {
await copy(join(this.distPath, 'index.html'), _200Path)
const indexPath = join(this.distPath, 'index.html')
if (existsSync(indexPath)) {
// Copy /index.html to /200.html for surge SPA
// https://surge.sh/help/adding-a-200-page-for-client-side-routing
const _200Path = join(this.distPath, '200.html')
if (!existsSync(_200Path)) {
await copy(indexPath, _200Path)
}
}
const duration = Math.round((Date.now() - s) / 100) / 10