Question

我正在使用Symfony Encore在VueJS中开始一个新项目。一切似乎都在正确编译，除非我无法让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有问题吗？我在这里真的没有太多进展，所以我很困惑为什么它不会挂载？

这是我的package.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脚本将您的元素定义为具有ID＆＃34; app＆＃34;：

  el: "#app",

但是模板中没有这样的元素。

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

您应该为div提供＆＃34; app＆＃34;的ID，以便您的视图脚本知道要定位的内容：

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

VueJS无法安装组件

1 个答案: