Vue.js 如何将此仪表添加到vue项目

我正在为一个项目使用vue。我找到了一个工作正常的量具，它可以完成我想要它做的事情，但问题是如何将它放在我的vue设置中。我尝试创建一个新的vue实例并将组件添加到页面中，但没有成功。在示例中，他们将组件添加到主index.html文件中。理论上，我希望将其作为一个组件添加到单个vue页面中，但也无法实现。有人能看看我的档案，告诉我这个问题吗

const Gauge=Vue.extend({
模板：`
{{百分比}}}%
`,
道具：[“百分比”]，
计算：{
轮换{
常数v=该百分比*180/100；
返回`旋转（${v}度）`；
} } });
新Vue({
el:“应用程序”，
组成部分：{
规范}）
正文{
背景色：#4D；
}
.集装箱{
宽度：400px；
高度：200px；
位置：绝对位置；
排名：0；
溢出：隐藏；
}
.仪表bg{
z指数：1；
宽度：400px；
高度：200px；
位置：绝对位置；
背景色：#a3f6ba；
边界半径：250px 250px 0；
}
.中间规{
z指数：3；
位置：绝对位置；
背景色：#4D；
宽度：250px；
高度：计算（250px/2）；
顶部：75px；
左边距：75px；
右边距：自动；
边界半径：250px 250px 0；
}
.轨距覆盖层{
z指数：2；
位置：绝对位置；
背景色：#5df086；
宽度：400px；
高度：200px；
顶部：200px；
边界半径：0 0 200px 200px；
变换原点：中心-顶部；
}
.仪表数据{
z指数：4；
颜色：#5df086；
位置：绝对位置；
宽度：400px；
底部：0；
文本对齐：居中；
字体大小：24px；
}
您缺少Vue应用程序中的
#
标志


编辑：您正在询问如何在
.vue
文件中执行此操作-请参阅此代码沙盒：



你有这个：


如果它在.vue文件中会怎样？模板位于Vue.extend内部，因此我知道我无法导出我添加到答案中的默认值{（）}-单击
在CodeSandbox上编辑
按钮。。。
new Vue({
  el: 'app',  // <<--- INCORRECT
  components: {
    Gauge 
  } 
});

new Vue({
  el: '#app',  // <<--- ADDED # SIGN
  components: {
    Gauge 
  } 
});