Vue是一种流行的JavaScript框架，常用于构建用户界面。当需要在Vue应用程序中显示标尺时，可以使用一些工具和库来实现。

一种常用的解决方案是使用vue-ruler组件。该组件基于Vue 2.x，支持水平和垂直方向的标尺。使用该组件需要先安装依赖：

npm install vue-ruler --save

然后在Vue组件中导入组件：

<template>
  <ruler v-model="rulerValue" :options="rulerOptions"></ruler>
</template>

<script>
import Ruler from 'vue-ruler'

export default {
  components: {
    Ruler
  },
  data() {
    return {
      rulerValue: 0,
      rulerOptions: {
        initialValue: 50,
        unit: 1,
        range: [0, 100],
        direction: 'horizontal',
        minInterval: 10,
        adjustBefore: this.adjustBefore,
        adjustAfter: this.adjustAfter,
        valueFunction: this.valueFunction,
        style: {
          fontFamily: 'Arial',
          fontSize: '12px',
          color: '#333'
        }
      }
    }
  }
}
</script>

其中：

• v-model绑定当前标尺的值
• :options定义标尺的配置
• initialValue定义标尺开始时的位置，单位是unit
• unit定义标尺的单位，例如1代表每个刻度为1个像素
• range定义标尺的最小值和最大值
• direction定义标尺的方向，可以为'horizontal'或'vertical'
• minInterval定义标尺两个刻度之间的最小距离
• adjustBefore定义标尺值改变前的回调函数
• adjustAfter定义标尺值改变后的回调函数
• valueFunction定义如何计算标尺的值，可以自定义函数
• style定义标尺的样式，例如字体、字号和颜色