0
fooをクリックすると、コンソールが期待どおりに印刷されますが、<router-view>は何も表示されません。webpack 2でVue 2.0のルータービューを使用しても動作しません
オフィシャルドキュメントには、単一のhtmlファイルでの使用方法のみが表示され、javascriptコードはその中に直接埋め込まれています。私は多くの例を読んだが、私はwebpackでそれを作ることができない。
webpackにvue 2ルータに関するサンプルがありますか？
は私がレイアウトとしてapp.vueファイルを作成します。
<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>
とWebPACKのエントリファイル：
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')
htmlファイル：ケースの他に
<!DOCTYPE html>
<html lang='zh'>
<head>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="/static/bunlde.js"></script>
</body>
</html
うーん、なぜそれがレンダリングされていないのか分かりません。 https://github.com/prograhammer/example-vue-project – prograhammer
どのコンソールエラーですか？私はここでwebpackでそれを使用する方法を示すチュートリアルのサンプルプロジェクトを持っていますか？ Google Chromeのvue開発ツールを使用してアプリを検査しようとしましたか？ –
@prograhammer @Frank Provostありがとうございます。最後に、webpack 2を使うときは、 'vue/dist/vue.js'の代わりに' vue/dist/vue.esm.js'をインポートする必要があることを知りました。 – tcpiper