Vue组件。需求未定义

时间:2019-01-18 23:02:21

标签: vue.js

使用Vue.js,我在/Component/App.vue中有了这个

 import Vue from 'vue';
 import VueFusionCharts from 'vue-fusioncharts';
 import FusionCharts from 'fusioncharts';
 import Column2D from 'fusioncharts/fusioncharts.charts';
 import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'; 
 Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);
 export default {
 name: 'app',
  data () {
    return {

     }
     }
 <template>
   <div id="appp">
    <div id="chart-container">
    </div>
   </div>
 </template>  

在我的js / examplevue.js脚本中

Vue.component('Chart', require('./components/App.vue'));
var app = new Vue({
el: '#app',
});

然后在我的秃头中,我有:

<div class=" " id="app">
  <Chart>.</Chart>
</div>
<script src="{{ asset('js/examplevue.js') }}"></script>

我捕获到错误:未定义需求。在Exemple.js中 通常,我的vuejs代码可以正常工作,直到我尝试对组件进行整数处理。

1 个答案:

答案 0 :(得分:1)

您的App.vue文件似乎格式错误,并且还有其他两个错误:

  1. 在您的模板中,div ID被错误地拼写为“ appp”,而不是您的examplevue.js文件中定义的“ app”
  2. 我还注意到您在}语句中缺少结尾export default

如果要使用<template>标签部分,则还必须将所有Javascript包含在<script>标签中(请参见下面的代码)。 :

/Component/App.vue

<template>
  <div id="app">
    <div id="chart-container">
    </div>
  </div>
</template>

<script>
 import Vue from 'vue';
 import VueFusionCharts from 'vue-fusioncharts';
 import FusionCharts from 'fusioncharts';
 import Column2D from 'fusioncharts/fusioncharts.charts';
 import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'; 
 Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);
 export default {
   name: 'app',
   data () {
     return {}
   }
 }
</script>

您可能还必须将以下代码放入examplevue.js文件中

import Vue from 'vue';

为了创建一个新的Vue实例。

希望有帮助!