ElemeFE / cooking

πŸ‘¨β€πŸ³ ζ›΄ζ˜“δΈŠζ‰‹ηš„ε‰η«―ζž„ε»Ίε·₯ε…·
http://elemefe.github.io/cooking/
MIT License
1.94k stars 289 forks source link

use cooking with vue-router on get started use-case #179

Closed yipcma closed 7 years ago

yipcma commented 7 years ago

cooking version

1.5.3

I face a problem when trying the get started in vue-router. the router-links show, but the router-view is not rendering anything.

<template>
  <div>
  <h1>Hello App!</h1>
  <p>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- <router-link> will be rendered as an `<a>` tag by default -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</div>
</template>

<script>
  export default {
    name: 'app'
  };
</script>
import Vue from 'vue';
import App from './app';

import VueRouter from 'vue-router';

Vue.use(VueRouter);

const Foo = { template: '<div>foo</div>' };
const Bar = { template: '<div>bar</div>' };

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
];

const router = new VueRouter({
  routes // short for routes: routes
});

new Vue({ // eslint-disable-line
  render: h => h(App),
  router
}).$mount('#app');

What is Expected?

router-view should render foo or bar respectively.

What is actually happening?

it current shows blank, however, the router-links are showing. also, console shows

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
QingWei-Li commented 7 years ago

Not cooking bug.

const Foo = { template: '<div>foo</div>' };
const Bar = { template: '<div>bar</div>' };

You should not use template. If you still want to use it, you should update configuration

cooking.conf.js

{
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }
}
yipcma commented 7 years ago

Thanks a lot for your response. I should have read this before asking https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

PS: love cooking and the eleme suite of tools. it's very pleasant to use for a beginner like myself.