我在CLI模式下使用Vue 2和webpack-simple。我有以下文件:
main.js:
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import Routes from './routes';
Vue.use('VueRouter');
const router = new VueRouter({
routes: Routes,
});
new Vue({
el: '#app',
render: h => h(App),
router: router,
});
App.vue:
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import Loader from './Loader.vue';
export default {
name: 'app',
}
</script>
<style lang="scss">
</style>
路由.js:
import Game from './components/Game.vue';
import Login from './components/Login.vue';
export default [
{ path: '/', component: Game, name: "Game" },
{ path: '/login', component: Login, name: "Login" },
]
Game.vue和Login.vue看起来一样:
<template>
<div>
Game
</div>
</template>
<script>
export default {
name: 'game',
}
</script>
<style lang="scss">
div {
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
很遗憾,启动文件时出现了错误:
[Vue warn]: 未知的自定义元素:- 您是否正确注册了该组件?对于递归组件,请确保提供“name”选项。
此外,“router-view”标签未更改为正确的HTML。 我第一次使用vue router。 它已通过npm在3.0.1版本中安装。
有什么建议吗?