Не рендерит компонент vue, почему?

Question

[700Hp]

Предупреждение в консоли:

runtime-core.esm-bundler.js?5c40:6873 [Vue warn]: A plugin must either be a function or an object with an "install" function.
warn @ runtime-core.esm-bundler.js?5c40:6873
use @ runtime-core.esm-bundler.js?5c40:3415
eval @ main.js?56d7:6
./src/main.js @ app.js:1100
__webpack_require__ @ app.js:854
fn @ app.js:151
1 @ app.js:1149
__webpack_require__ @ app.js:854
checkDeferredModules @ app.js:46
(anonymous) @ app.js:994
(anonymous) @ app.js:997
runtime-core.esm-bundler.js?5c40:6873 [Vue warn]: Failed to resolve component: router-view 
  at <App app=null apps= [] options= {mode: "history", routes: Array(2)}  ... >

Файл main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App, router)
app.use(router)
app.mount('#app')

Файл router.js:

import Router from 'vue-router'
import Home from './views/Home'
// import { VueElement } from 'vue'

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home,
    },

    {
      path: '/todos',
      component: () => import('./views/Todos.vue'),
    },
  ],
})
export default router

Компонент домашней страницы Home.vue:

<template>
  <div>
    <h2>Home page</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod itaque
      tempore reiciendis.
    </p>

    <a href="/todos">Todos</a>
  </div>
</template>

Главный файл App.vue:

<template>
  <div id="app">
    <h1>Todo applictaion</h1>
    <hr />

    <router-view></router-view>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Так вот приложение работает. Он открывает страницу где отображает только заголовок и черту с файла App.vue. Как исправить?

Answer 1

[Сергей delphinpro]

A plugin must either be a function or an object with an "install" function

Сейчас средства перевода довольно хорошо развиты, но давайте я вам переведу:

Плагин должен быть функцией, или объектом, содержащим метод install()

В use нужно подсовывать то, что вы импортируете из 'vue-router'

Т.е.

import Router from 'vue-router'
Vue.use(Router)

Comments

[700Hp]

Да, я так пробовал. В файле router js. Только ошибку выдаёт следующего характера - что vue не определён.
Пытался и с импортом vue from 'vue'. И без него.