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

Question

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

http://themes.getbootstrap.com/preview/?theme_id=1696&show_new=

我有一个文件 app-charts-morris.js，保存在我的 Static 文件夹中，以下是该文件的一些代码:

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>

在这里我访问我的 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

Here is my Vue code:

如果它是您的 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>