静态文件夹中的vue.js javascript文件

Question

这是我将要开发的第一个web应用程序，所以我对Vue.js Javascript编程完全陌生。我正在使用一个名为Beagle的Boostrap模板。

new=

我有一个文件应用程序图表-morris.js，它保存在我的静态文件夹中，下面是该文件的一些代码：

var App = (function () {
'use strict';

App.chartsMorris = function( ){

  //Donut Chart
  function donut_chart(){
    var color1 = App.color.warning;
  var color2 = App.color.success;
  var color3 = App.color.primary;

  Morris.Donut({
        element: 'donut-chart',
        data: [
          {label: 'Facebook', value: 33 },
          {label: 'Google', value: 33 },
          {label: 'Twitter', value: 33}
        ],
        colors:[color1, color2, color3],
        formatter: function (y) { return y + "%" }
      });
  }

  donut_chart();

};

return App;
})(App || {});

它所做的是，它应该向我展示带有一些javascript函数的Donut图表，但是这里什么都没有出现，只有空的空间。

这是我的Vue代码：

<template>
<div id="donut-chart" style="height: 250px;"></div>
</template>

<script>
export default {
data () {
  return {
  }
},
computed: {
},
watch: {
},
methods: {
}
}
</script>

在这里，我访问javascript文件：

 <script src="/static/js/app-charts-morris.js" type="text/javascript"> 
 </script>

 <script type="text/javascript">
  $(document).ready(function(){
  //initialize the javascript
 App.init()
 App.chartsMorris()
 App.ChartJs()
 App.dashboard()
 });
</script>

我的main.js文件

import Vue from 'vue'
import Vuetify from 'vuetify'
import App from './App'
import * as firebase from 'firebase'
import 'firebase/firestore'
import router from './router'
import { store } from './store'
import {VueMasonryPlugin} from 'vue-masonry'
import InstantSearch from 'vue-instantsearch'

Vue.use(InstantSearch)
Vue.use(Vuetify)
Vue.use(VueMasonryPlugin)
Vue.config.productionTip = false

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

这里有什么问题？为什么vue.js不显示我的甜甜圈图表？但是它没有任何框架

Answer 1

这是我的Vue代码：

如果是您的App.vue文件，在元素#app上初始化Vue实例时，需要将它添加到模板中：

<template>
  <div id="app">
    <div id="donut-chart" style="height: 250px;"></div>
  </div>
</template>

或将元素更改为donut-chart

new Vue({
  el: '#donut-chart',
  router,
  store,
  render: h => h(App),
})

<template>
  <div id="donut-chart" style="height: 250px;"></div>
</template>