如何让这个 vue 循环进度条插件工作?

Question

这个循环进度条插件似乎不起作用。当我将其添加到我的代码中时，它说事件(在方法 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>

更新
我的主.js有一个问题。我用这段代码让它工作

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

对不起，我不知道问题出在哪里，但谢谢！

Answer 1

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

module.exports = {
runtimeCompiler: true
}

Answer 2

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

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

但是这个"包"也是一个巨大的混乱，它永远不会正常工作：作者只是打包了一个 Vue 应用程序并发布了它(使用 JQuery，jeez(。

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

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