Question

在我的Web控制台中获取此错误，并且组件未呈现。我已经阅读了大约100篇类似的帖子，但尚无法修复。我正在使用'vue-loader'和vue-tempalte-compiler所以我不认为运行时编译是一个问题。这是我的代码：

application.js

import Vue from 'vue/dist/vue.esm';
import App from '../components/app.vue';
import Vuetify from 'vuetify';
import Vuelidate from 'vuelidate';
import Clipboard from 'v-clipboard';


Vue.use(Clipboard);
Vue.use(Vuelidate);
Vue.use(Vuetify);

document.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(document.createElement('app'));
  const app = new Vue({
    el: 'app',
    template: '<App/>',
    components: { App }
  });
});

我的app.vue文件

<template>
  <v-app class="my_background">
    <v-container>
      <!--<marketplace @addComponent="components.push($event)" @removeComponent="components.pop()"  v-for="(item, index) in components" :index="index"></marketplace>-->
      <welcome></welcome>
    </v-container>
  </v-app>
</template>

<script>
import marketplace from '../components/marketplace.vue';
import welcome from '../components/welcome.vue';
import 'images/background.png'
import 'images/welcome.png'

export default {
  data: function() {
    return{
      components: [1]
    };
  },
  components: {
    marketplace,
    welcome
  }
};
</script>

<style>
.my_background {
  background-image: url('../images/background.png') !important;
  height: 100% !important; 
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
</style>

我的welcome.vue文件

<v-template>
  <v-app>  
    <v-container id="welcome_page" v-if="show == 0" fill-height key="first">
      <v-layout row wrap align-center class="text-xs-center">

        <v-flex align-center xs6 v-show="['lg', 'xl'].includes(size)" class="mx-auto">
          <v-jumbotron flex src="welcome.png" :height="imageHeight" :width="imageHeight">
            <v-container fill-height>
              <v-layout align-center>
                <v-flex xs12 text-xs-center>
                  <v-spacer class="mb-4"></v-spacer>
                  <h1 class="display-1 oswald my-light-green mt-5">Welcome to <span class="my-darker-green">ByteStand</span></h1>
                  <h1 class="subheading mont">Easily create Shopify listings based on</h1>
                  <h1 class="subheading mont">your Amazon inventory.</h1>
                  <v-btn large @click="show++" class="mt-3 my-green-button">Let's Get Started!
                  </v-btn>
                </v-flex>
              </v-layout>
            </v-container>
          </v-jumbotron>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</v-template>


<script>

import 'images/welcome.png';
export default {};

</script>

<style>

</style>

Package.json

{
  "dependencies": {
    "@rails/webpacker": "3.4",
    "axios": "^0.18.0",
    "country-list": "^1.1.0",
    "v-clipboard": "^1.0.4",
    "vue": "^2.5.16",
    "vue-loader": "^14.2.2",
    "vue-template-compiler": "^2.5.16",
    "vuelidate": "^0.6.2",
    "vuetify": "^1.0.13"
  },
  "devDependencies": {
    "webpack-dev-server": "2.11.2"
  }
}

我不知道为什么我的组件没有渲染，我收到了这个错误？

Vuetify - Rails - Webpack：无法挂载组件：模板或渲染函数未定义

0 个答案: