VueJS Не удалось смонтировать компонент

Question

Я начинаю новый проект в VueJS с Symfony Encore.Кажется, все компилируется правильно, за исключением того, что я не могу заставить работать VueJS.Я думаю, что мне не хватает плагина или чего-то еще?

Это моя ошибка в консоли:

vue.esm.js:591 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <App> at assets\App.vue
       <Root>

Мой App.vue является основным:

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

<script>
export default {
  name: 'app'
}

</script>

<style lang="scss-loader">
  /* Import Font Awesome Icons Set */
  /*$fa-font-path: '~font-awesome/fonts/';*/
  @import '~font-awesome/scss/font-awesome.scss';
  /* Import Simple Line Icons Set */
  /*$simple-line-font-path: '~simple-line-icons/fonts/';*/
  @import '~simple-line-icons/scss/simple-line-icons.scss';
  /* Import Bootstrap Vue Styles */
  @import 'bootstrap-vue/dist/bootstrap-vue.css';
  /*// Import Main styles for this application*/
  @import './assets/scss/style';
</style>

Этомой файл main.js:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import {routes} from './router'

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'hash',
    linkActiveClass: 'open active',
    scrollBehavior: () => ({ y: 0 }),
    routes: routes
});

router.beforeEach((to, from, next) => {
    console.log('Router is working');
    next();
});

new Vue({
  el: "#app",
  router,
  render: h => h(App),
})

Что-то не так с моим App.vue?У меня не так много здесь происходит, поэтому я не понимаю, почему он не будет монтироваться?

Это мой пакет. Json:

{
  "devDependencies": {
    "@symfony/webpack-encore": "symfony/webpack-encore",
    "vue": "^2.5.16",
    "vue-template-compiler": "^2.5.16",
    "webpack-notifier": "^1.6.0"
  },
  "scripts": {
    "dev-server": "encore dev-server",
    "dev": "encore dev --progress=true",
    "watch": "encore dev --watch",
    "build": "gulp bump && encore production --progress=true"
  },
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-istanbul": "^4.1.6",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "bootstrap": "^4.1.1",
    "bootstrap-vue": "^2.0.0-rc.11",
    "cross-env": "^5.1.6",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "node-sass": "^4.9.0",
    "popper.js": "^1.14.3",
    "postcss-loader": "^2.1.5",
    "sass-loader": "^7.0.1",
    "simple-line-icons": "^2.4.1",
    "style-loader": "^0.21.0",
    "vue-loader": "^15.0",
    "vue-router": "^3.0.1",
    "vue-style-loader": "^4.1.0"
  }
}

Answer 1

Ваш сценарий vue определяет ваш элемент как идентификатор "app":

  el: "#app",

Но в вашем шаблоне такого элемента нет.

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

Вы должны дать div идентификатор "app", чтобы ваш скрипт вида знал, на что нацелиться:

<template>
   <div id="app">
     <router-view></router-view>
   </div>
</template>