0
Wenn ich auf foo klicken, würde die Konsole wie erwartet drucken, aber die <router-view> render nichts.Vue 2.0 Router-Ansicht funktioniert nicht, wenn in Webpack 2 verwendet
Die offiziellen Dokumente zeigen nur, wie man es in einer einzigen HTML-Datei verwendet und JavaScript-Code ist direkt darin eingebettet. Ich habe viele Beispiele gelesen, aber ich kann es nicht im Webpack machen.
Oder gibt es ein Beispiel über Vue 2 Router im Webpack?
ich erstellen app.vue Datei als Layout:
<template>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
und webpack Eintrag Datei:
import Vue from 'vue';
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.use(VueRouter)
import appView from 'app.vue'
const Foo = { template: '<div>foo</div>' , mounted(){console.log(this,'mount foo')}}
const Bar = { template: '<div>bar</div>' }
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
const router = new VueRouter({
routes
})
new Vue({
router,
render (h) {
return h(appView);
},
}).$mount('#app')
die HTML-Datei:
<!DOCTYPE html>
<html lang='zh'>
<head>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="/static/bunlde.js"></script>
</body>
</html
Hmm, ich sehe nicht, warum es nicht für Sie rendern. Ich habe ein Beispielprojekt mit Tutorial, das Ihnen zeigt, wie Sie es im Webpack verwenden können: https://github.com/prograhammer/example-vue-project – prograhammer
Irgendwelche Konsolenfehler? Haben Sie versucht, Ihre App mithilfe der vue dev tools für Google Chrome zu überprüfen? –
@prograhammer @Frank Provost danke. Ich finde schließlich heraus, dass ich "vue/dist/vue.esm.js" anstelle von "vue/dist/vue.js" importieren muss, wenn ich webpack 2 verwende. – tcpiper