如何使这个 vue 循环进度条插件工作？答案

【问题标题】：How can I make this vue circular progress bar plugin work?如何使这个 vue 循环进度条插件工作？
【发布时间】：2020-05-21 15:08:11
【问题描述】：

这个圆形进度条插件似乎不起作用。当我将它添加到我的代码中时，它会显示事件（在方法 progress_end() 中已定义但未使用）。
此外，如果我将事件作为参数删除，则会出现此错误-
您正在使用Vue 的仅运行时构建，其中模板编译器不可用。将模板预编译为渲染函数或使用编译器包含的构建
请查看此链接以供参考。
https://www.npmjs.com/package/vue2-circle-progress
有人可以帮我解决这个问题吗？

<template>

  <div id="app">
      <vue-circle
        :progress="50"
        :size="100"
        :reverse="false"
        line-cap="round"
        :fill="fill"
        empty-fill="rgba(0, 0, 0, .1)"
        :animation-start-value="0.0"
        :start-angle="0"
        insert-mode="append"
        :thickness="5"
        :show-percent="true"
        @vue-circle-progress="progress"
        @vue-circle-end="progress_end">
      </vue-circle>
  </div> 

</template>

<script>
  import VueCircle from 'vue2-circle-progress'
  export default {
    components: {
      VueCircle
    },
    data(){
      return{
        fill : { gradient: ["red", "green", "blue"] },
      }
    },
    methods:{
      progress(event,progress,stepValue){
        console.log(stepValue);
      },
      progress_end(event){
        console.log("Circle progress end");
      }
    }
  }
</script>

更新
我的 main.js 中有一个问题。我使用此代码使其工作

  el:'#app',
  components: { App },
  template: "<App/>",
  render:h=>h(App)

抱歉，我不知道问题出在哪里，但谢谢！

【问题讨论】：

标签： javascript vue.js vue-component progress-bar

【解决方案1】：

如果你的项目是@vue/cli创建的，创建vue.config.js文件并添加：

module.exports = {
  runtimeCompiler: true
}

【讨论】：

【解决方案2】：

它不起作用，因为您将常量数字作为道具传递，然后只是监听事件。

:progress="50"
:size="100"

但这个“包”也是一团糟，它永远不会正常工作：作者只是打包了一个 Vue 应用程序并发布了它（用 JQuery，天哪）。

寻找其他进度条包。有很多，正在积极更新。

编辑：
关于您的运行时仅构建问题，您可能只是将 Vue 作为脚本包含在内：https://vuejs.org/v2/guide/installation.html#CDN
此解决方案仅用于原型设计。

【讨论】：