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

这是我将要制作的第一个web应用程序，因此我对Vue.js Javascript编程一无所知。我使用的是一个叫做Beagle的Boostrap模板

我在静态文件夹中保存了一个文件app-charts-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函数的甜甜圈图表，但这里什么都没有，只有空白

以下是我的Vue代码：

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

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

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

以下是我的Vue代码：

如果它是您的

App.vue

文件，则在元素

#App

上初始化vue实例时，需要将其添加到模板中：

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

您的Vue实例在哪里初始化（

新建Vue（{…}）

）？我编辑了我的问题

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 () {
  }
  })

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

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