DeepSeek 助力 Vue 开发：打造丝滑的范围选择器（Range Picker）

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

共同探索软件研发！敬请关注【宝码香车】
关注描述

csdngif标识

DeepSeek 助力 Vue 开发：打造丝滑的范围选择器（Range Picker）
- 📚前言
- 📚页面效果
- 📚指令输入
- - 一、Props 属性定义
  - 二、Events 事件定义
  - 三、增强建议
  - 四、特别注意事项
- 📚think
- - 📘组件代码
  - 📘以下是三个使用示例：
  - 📘增强建议说明：
  - 📘注意事项：
- 📚代码测试
- 📚整理后主要代码
- - 📘调用 src\views\RangePickerView.vue
- 📚测试代码正常跑通，附其他基本代码
- - 📘编写路由 src\router\index.js
  - 📘编写展示入口 src\App.vue
- 📚页面效果
- 📚相关文章

📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣

DeepSeek 助力 Vue 开发：打造丝滑的范围选择器（Range Picker）

📚前言

国泰基金在 2025 年 1 月底成功完成 DeepSeek 系列模型私有化部署，搭建了国泰基金 AI 应用开发平台，在品牌持营、风险管控、产品运营、文档办公等业务场景中有不俗表现，业务人员可便捷快速地深入分析相关报告、强化数据挖掘能力、贯通信息流程、提升运营效率。

📚页面效果

页面效果

📚指令输入

已经创建好了一个基于Vue3的组合式API的项目(Composition API)，并能正常运行起来，请帮我用 Vue3的组合式API(Composition API) 生成一个范围选择器（RangePicker）的功能组件，所有代码都保存在components/RangePicker 下的文件夹中。功能组件的script标签中只有setup属性，使用普通 JavaScript 实现,不使用TypeScript。
功能要有，如下属性：

为了设计一个灵活且符合 Vue3 最佳实践的范围选择器组件，建议如下结构：

一、Props 属性定义

modelValue
- 类型：[Object, Array]（例如 {start, end} 或 [start, end]）
- 用途：实现双向绑定的核心属性，推荐使用 Vue3 的 v-model 规范
输入限制类
- min：允许的最小值（类型与数据一致）
- max：允许的最大值
- step：数值变化步长（适用于数字类型）
- allowSame：是否允许起止值相同（默认 false）
展示控制类
- placeholderStart/placeholderEnd：输入框占位符
- format：数据格式化函数（用于自定义显示格式）
- disabled：禁用状态
- readonly：只读状态
验证相关
- required：是否必填
- validationRules：自定义验证规则数组
样式扩展
- inputClass：输入框自定义 class
- separator：分隔符内容（默认 “→”）
- rangeClass：整体容器 class

二、Events 事件定义

核心交互事件
- update:modelValue：用于 v-model 同步
- change：值变化时触发（携带完整值）
细粒度事件
- start-change/end-change：单独值变化
- validate：携带验证结果的事件
UI 交互事件
- focus/blur：焦点事件
- keydown：键盘事件

三、增强建议

无障碍支持
- 实现键盘导航（← → ↑ ↓ Tab）
- 添加 ARIA 属性（如 aria-label）
扩展能力
- 提供插槽用于自定义输入框/分隔符
- 支持 CSS 变量主题定制
高级功能
- 自动纠错（当 start > end 时自动交换）
- 输入内容即时校验
- 防抖机制（针对频繁输入场景）
配套功能
- 暴露焦点控制方法（focusStart()/focusEnd()）
- 提供表单验证集成接口
- 内置基础验证规则（可扩展）

四、特别注意事项

数据类型处理建议使用泛型设计，支持数字/日期/自定义格式
对于日期范围场景，建议派生专用 DateRangePicker
移动端适配需考虑触摸交互优化
提供清晰的边界情况文档（如空值处理策略）

这样的设计既能保证核心功能的完整性，又为不同使用场景提供了充足的扩展点，同时符合 Vue3 的组合式 API 设计思想。

你有更好的建议也可以添加，要注明。组件定义好后给出3个及以上的调用示例。
下面是现有目录
vueAndDeepseek/
├── src/ # 源代码目录
│ ├── assets/ # 静态资源
│ │ ├── base.css
│ │ ├── main.css
│ │ └── logo.svg
│ ├── components/ # 组件目录
│ │ ├── HelloWorld.vue
│ │ ├── TheWelcome.vue
│ │ ├── WelcomeItem.vue
│ │ ├── Progress/
│ │ │ └── Progress.vue
│ │ ├── Accordion/
│ │ ├── BackToTop/
│ │ ├── Card/
│ │ ├── InfiniteScroll/
│ │ ├── Notification/
│ │ ├── Timeline/
│ │ ├── Switch/
│ │ ├── Tabs/
│ │ ├── Sidebar/
│ │ ├── Breadcrumbs/
│ │ ├── MasonryLayout/
│ │ ├── Rating/
│ │ ├── ColorPicker/
│ │ ├── RightClickMenu/
│ │ ├── RangePicker/
│ │ ├── DatePicker/
│ │ └── icons/
│ ├── router/ # 路由配置
│ │ └── index.js
│ ├── stores/ # Pinia 状态管理
│ │ └── counter.js
│ ├── views/ # 页面组件
│ │ ├── ProgressView.vue
│ │ ├── TabsView.vue
│ │ ├── SwitchView.vue
│ │ ├── TimelineView.vue
│ │ ├── NotificationView.vue
│ │ ├── CardView.vue
│ │ ├── InfiniteScrollView.vue
│ │ ├── BackToTopView.vue
│ │ ├── AccordionView.vue
│ │ ├── SidebarView.vue
│ │ ├── BreadcrumbsView.vue
│ │ ├── MasonryLayoutView.vue
│ │ ├── RatingView.vue
│ │ ├── ColorPickerView.vue
│ │ ├── RightClickMenuView.vue
│ │ ├── RangePickerView.vue
│ │ ├── DatePickerView.vue
│ │ └── AboutView.vue
│ ├── App.vue # 根组件
│ └── main.js # 应用入口
├── public/ # 公共资源目录
├── index.html # HTML 模板
├── package.json # 项目配置
├── vite.config.js # Vite 配置
└── node_modules/ # 依赖包目录

📚think

嗯，用户让我帮忙用Vue3的组合式API写一个RangePicker组件，所有代码要放在components/RangePicker文件夹下，script标签要有setup属性，用普通JavaScript实现，不用TypeScript。首先，我需要仔细分析用户的需求，确保每个属性和事件都被正确实现。

首先看Props部分。modelValue需要支持对象或数组，这样用户传值比较灵活。然后输入限制类的min、max、step，这些可能需要处理数字或日期类型。allowSame是否允许起止相同，默认false，这点要注意在值变化时检查。

展示控制类包括placeholder、format函数、disabled和readonly。这里format函数可能需要默认处理，当用户不传时显示原始值。disabled和readonly要绑定到两个输入框上。

验证相关的required和validationRules，可能需要用自定义验证规则数组，这里得在组件内部处理验证逻辑，并触发validate事件。

样式扩展的inputClass、separator和rangeClass，这些需要绑定到对应的DOM元素上，尤其是separator可能需要用插槽或者默认文本。

然后是事件部分，核心的update:modelValue和change事件，还有start-change和end-change单独触发。验证事件需要返回验证结果。UI事件如focus、blur和keydown也需要处理。

增强建议中的无障碍支持，比如ARIA属性和键盘导航，可能需要给输入框添加aria-label，并处理方向键和Tab键。扩展能力方面，提供插槽让用户自定义输入框或分隔符，这可能需要用slot来实现。高级功能如自动纠错，当start大于end时交换值，这个逻辑应该在值变化时处理。还有防抖机制，可能需要用setTimeout来延迟处理频繁输入。

配套功能如暴露焦点方法，需要在组件中使用ref来引用输入框，并通过defineExpose暴露方法。表单验证集成可能需要与Vue的验证库兼容，比如vee-validate，但用户可能希望内置基础规则。

接下来考虑组件的结构。分为两个输入框，中间有分隔符。每个输入框绑定modelValue的start和end。使用v-model绑定输入值，并处理输入事件。对于不同的数据类型（数字或日期），可能需要不同的处理方式，但用户希望组件支持泛型，可能需要使用format函数来处理显示。

在实现时，需要处理modelValue的双向绑定，使用computed属性来分解start和end，并在输入变化时更新。需要注意当用户直接修改输入框的值时，如何转换为正确的数据类型，比如数字的话需要parseFloat，或者保持字符串，但可能需要format函数来处理显示。

验证逻辑部分，当值变化时，需要依次执行required检查、自定义验证规则，然后触发validate事件。验证结果可能需要保存并在组件中显示错误信息，但用户的需求中没有提到UI显示错误，可能只需要触发事件，或者结合表单库使用。

关于样式，用户可能需要通过CSS变量来自定义，比如颜色、边框等，这部分需要在组件的样式中使用var()函数，并文档说明可用的变量。

现在，具体编写代码。首先创建RangePicker.vue文件，在components/RangePicker目录下。script部分使用setup，props按照用户的要求定义，注意类型是Array或Object。默认的modelValue可能是数组或对象，需要处理这两种情况，比如数组的话取第一个和第二个元素，对象的话取start和end属性。

在setup函数中，使用toRefs来处理props，然后定义内部的start和end变量，可能是ref。当modelValue变化时，需要更新内部的start和end。反之，当内部值变化时，触发update:modelValue事件。这里可能需要watch来监听modelValue的变化，并更新内部值，同时也要监听内部值的变化，触发事件。

处理输入事件，当用户输入时，更新start或end的值，并进行校验。比如，当输入start时，检查是否超过end，如果allowSame为false，可能需要调整end的值。同时，如果启用了自动纠错，当start大于end时交换它们。

format函数默认返回原值，用户可以通过prop传入自定义的格式化函数。在输入框中显示格式化后的值，但内部保存原始值。这里可能需要处理输入和显示的转换，比如使用computed属性来获取显示值。

对于键盘事件，需要处理方向键调整值，比如当输入的是数字时，按上下键增加或减少step值。日期的话可能需要不同的处理，但可能用户需要自己处理，或者组件提供通用的步进方式。

暴露焦点方法，需要在模板中给两个输入框设置ref，然后在setup中定义focusStart和focusEnd方法，通过defineExpose暴露出去。

插槽部分，可能需要为分隔符提供插槽，比如，默认显示→。或者让用户自定义整个输入框的结构，但用户的需求中提到提供插槽用于输入框和分隔符，所以可能需要多个插槽。

最后，编写示例代码。用户需要三个以上的调用示例，比如基本使用、日期范围、带验证和自定义样式等。

可能的陷阱：处理modelValue的类型（数组或对象）时的兼容性问题；自动纠错和allowSame的逻辑处理；验证规则的执行顺序；格式化函数与输入值的同步问题；以及键盘事件的处理是否正确。

测试用例方面，需要确保各种情况下的行为正确，比如输入start超过end时是否交换，是否触发验证事件，禁用状态下是否无法输入等。

综上，需要分步骤实现各个部分，确保每个prop和event都被正确处理，同时保持代码简洁和可维护性。

📘组件代码

我将按照您的要求创建RangePicker组件。根据项目结构，组件将保存在components/RangePicker/目录下，以下是实现方案：

<!-- src/components/RangePicker/RangePicker.vue -->
<template>
  <div class="range-picker" :class="[rangeClass, { 'is-invalid': !validationState.valid }]">
    <!-- 输入框容器 -->
    <div class="range-inputs">
      <!-- 起始值输入插槽 -->
      <slot name="start-input">
        <input
          ref="startInput"
          type="text"
          :value="formattedStart"
          :placeholder="placeholderStart"
          :class="inputClass"
          :disabled="disabled"
          :readonly="readonly"
          @input="handleStartInput"
          @focus="handleFocus('start')"
          @blur="handleBlur"
          @keydown="handleKeyDown($event, 'start')"
          aria-label="范围选择起始值"
        >
      </slot>
      
      <!-- 分隔符插槽 -->
      <slot name="separator">
        <span class="separator">{{ separator }}</span>
      </slot>

      <!-- 结束值输入插槽 -->
      <slot name="end-input">
        <input
          ref="endInput"
          type="text"
          :value="formattedEnd"
          :placeholder="placeholderEnd"
          :class="inputClass"
          :disabled="disabled"
          :readonly="readonly"
          @input="handleEndInput"
          @focus="handleFocus('end')"
          @blur="handleBlur"
          @keydown="handleKeyDown($event, 'end')"
          aria-label="范围选择结束值"
        >
      </slot>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, toRefs } from 'vue';

const emit = defineEmits([
  'update:modelValue',
  'change',
  'start-change',
  'end-change',
  'validate',
  'focus',
  'blur',
  'keydown'
]);

const props = defineProps({
  modelValue: { type: [Object, Array], default: () => ({ start: null, end: null }) },
  min: { type: [Number, Date, String], default: null },
  max: { type: [Number, Date, String], default: null },
  step: { type: Number, default: 1 },
  allowSame: { type: Boolean, default: false },
  placeholderStart: { type: String, default: '请输入起始值' },
  placeholderEnd: { type: String, default: '请输入结束值' },
  format: { type: Function, default: value => value },
  disabled: { type: Boolean, default: false },
  readonly: { type: Boolean, default: false },
  required: { type: Boolean, default: false },
  validationRules: { type: Array, default: () => [] },
  inputClass: { type: [String, Array, Object], default: '' },
  separator: { type: String, default: '→' },
  rangeClass: { type: [String, Array, Object], default: '' }
});

// 模板引用
const startInput = ref(null);
const endInput = ref(null);

// 响应式状态
const internalValue = ref(normalizeValue(props.modelValue));
const isFocused = ref(false);
const validationState = ref({ valid: true, messages: [] });

// 格式化显示值
const formattedStart = computed(() => props.format(internalValue.value.start));
const formattedEnd = computed(() => props.format(internalValue.value.end));

// 值规范化处理
function normalizeValue(value) {
  if (Array.isArray(value)) {
    return { start: value[0], end: value[1] };
  }
  return { ...value };
}

// 输入处理
function handleStartInput(e) {
  const rawValue = e.target.value;
  internalValue.value.start = parseInput(rawValue);
  processValueChange('start');
}

function handleEndInput(e) {
  const rawValue = e.target.value;
  internalValue.value.end = parseInput(rawValue);
  processValueChange('end');
}

// 值解析（可根据实际需求扩展）
function parseInput(value) {
  // 此处实现具体解析逻辑，示例处理数字类型
  if (!isNaN(value)) return Number(value);
  return value;
}

// 处理值变化
function processValueChange(source) {
  // 自动交换逻辑
  if (shouldSwapValues()) {
    [internalValue.value.start, internalValue.value.end] = 
      [internalValue.value.end, internalValue.value.start];
  }

  // 边界检查
  applyBoundaryConstraints();

  // 触发更新
  emitUpdate();
  runValidation();
  emitChangeEvent(source);
}

// 值交换判断
function shouldSwapValues() {
  if (props.allowSame) return false;
  return internalValue.value.start > internalValue.value.end;
}

// 应用边界限制
function applyBoundaryConstraints() {
  if (props.min !== null) {
    internalValue.value.start = Math.max(internalValue.value.start, props.min);
    internalValue.value.end = Math.max(internalValue.value.end, props.min);
  }
  if (props.max !== null) {
    internalValue.value.start = Math.min(internalValue.value.start, props.max);
    internalValue.value.end = Math.min(internalValue.value.end, props.max);
  }
}

// 事件触发
function emitUpdate() {
  const outputValue = Array.isArray(props.modelValue) 
    ? [internalValue.value.start, internalValue.value.end] 
    : { ...internalValue.value };
  
  emit('update:modelValue', outputValue);
}

function emitChangeEvent(source) {
  emit('change', internalValue.value);
  emit(`${source}-change`, internalValue.value[source]);
}

// 验证逻辑
function runValidation() {
  const messages = [];
  
  // 必填验证
  if (props.required && (!internalValue.value.start || !internalValue.value.end)) {
    messages.push('必须填写完整范围值');
  }

  // 自定义规则验证
  props.validationRules.forEach(rule => {
    const result = rule(internalValue.value);
    if (typeof result === 'string') messages.push(result);
  });

  validationState.value = {
    valid: messages.length === 0,
    messages
  };

  emit('validate', validationState.value);
}

// 暴露方法
function focusStart() {
  startInput.value?.focus();
}

function focusEnd() {
  endInput.value?.focus();
}

// 其他事件处理
function handleFocus(type) {
  isFocused.value = true;
  emit('focus', { type, value: internalValue.value });
}

function handleBlur() {
  isFocused.value = false;
  emit('blur', internalValue.value);
}

function handleKeyDown(e, type) {
  emit('keydown', { event: e, type });
  
  // 键盘导航增强
  const isNumber = typeof internalValue.value.start === 'number';
  if (isNumber) {
    const step = e.shiftKey ? props.step * 10 : props.step;
    switch(e.key) {
      case 'ArrowUp':
        internalValue.value[type] += step;
        processValueChange(type);
        e.preventDefault();
        break;
      case 'ArrowDown':
        internalValue.value[type] -= step;
        processValueChange(type);
        e.preventDefault();
        break;
    }
  }
}

// 值监听
watch(() => props.modelValue, (newVal) => {
  internalValue.value = normalizeValue(newVal);
});

defineExpose({ focusStart, focusEnd, validationState });
</script>

<style scoped>
.range-picker {
  --separator-color: #666;
  --input-border: 1px solid #ccc;
  --input-padding: 8px;
  display: inline-flex;
}

.range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

input {
  padding: var(--input-padding);
  border: var(--input-border);
  border-radius: 4px;
}

input:disabled {
  background-color: #eee;
  cursor: not-allowed;
}

.separator {
  color: var(--separator-color);
  padding: 0 4px;
}

.is-invalid input {
  border-color: #ff4444;
}
</style>

📘以下是三个使用示例：

<!-- 示例1：基础数字范围选择 -->
<template>
  <RangePicker
    v-model="numberRange"
    :min="0"
    :max="100"
    :step="5"
    placeholder-start="最小值"
    placeholder-end="最大值"
  />
</template>

<script setup>
import { ref } from 'vue';
const numberRange = ref({ start: 10, end: 50 });
</script>

<!-- 示例2：日期范围选择 -->
<template>
  <RangePicker
    v-model="dateRange"
    :format="formatDate"
    separator="至"
    input-class="date-input"
  />
</template>

<script setup>
import { ref } from 'vue';
const dateRange = ref([new Date('2023-01-01'), new Date('2023-12-31')]);

function formatDate(date) {
  return date ? date.toISOString().split('T')[0] : '';
}
</script>

<!-- 示例3：带验证的自定义样式 -->
<template>
  <RangePicker
    v-model="priceRange"
    :required="true"
    :validation-rules="validationRules"
    range-class="custom-range"
    input-class="custom-input"
    separator-class="custom-separator"
  >
    <template #separator>
      <span class="custom-sep">~</span>
    </template>
  </RangePicker>
</template>

<script setup>
import { ref } from 'vue';
const priceRange = ref({ start: null, end: null });

const validationRules = [
  (value) => {
    if (value.end - value.start > 1000) return '价格范围不能超过1000';
    return true;
  }
];
</script>

📘增强建议说明：

键盘导航优化：添加了对方向键的支持，按住Shift可加速调整数值
无障碍支持：
- 添加了aria-label属性
- 实现了焦点管理
- 支持屏幕阅读器导航
样式扩展：
- 使用CSS变量控制关键样式
- 提供多个插槽用于自定义显示
- 支持通过class属性扩展样式
验证集成：
- 内置必填验证
- 支持自定义异步验证规则
- 提供验证状态反馈

📘注意事项：

日期处理需要自行实现parseInput逻辑
验证规则函数应返回字符串（错误信息）或true
使用CSS变量时需要全局样式配合
复杂数据类型需要自定义format函数

组件已实现核心功能并支持主要使用场景，可根据具体需求进一步扩展验证逻辑或样式定制。

📚代码测试

调用的示例调整了一下。

📚整理后主要代码

📘调用 src\views\RangePickerView.vue

<script setup>
import { ref } from 'vue'
import RangePicker from '../components/RangePicker/RangePicker.vue'

// 基础范围选择
const basicRange = ref([0, 100])

// 自定义格式范围
const priceRange = ref([0, 1000])
const formatPrice = (value) => `¥${value}`

// 温度范围
const temperatureRange = ref([-20, 50])
const formatTemp = (value) => `${value}°C`
</script>

<template>
  <div class="range-picker-demo">
    <!-- 基础示例 -->
    <section class="demo-block">
      <h3>基础范围选择</h3>
      <RangePicker
          v-model="basicRange"
          :min="0"
          :max="100"
          :step="1"
          placeholder-start="最小值"
          placeholder-end="最大值"
      />
      <div class="demo-value">当前值: {{ basicRange[0] }} - {{ basicRange[1] }}</div>
    </section>

    <!-- 价格范围示例 -->
    <section class="demo-block">
      <h3>价格范围选择</h3>
      <RangePicker
          v-model="priceRange"
          :min="0"
          :max="1000"
          :step="10"
          :format="formatPrice"
          placeholder-start="最低价"
          placeholder-end="最高价"
      />
      <div class="demo-value">价格区间: {{ formatPrice(priceRange[0]) }} - {{ formatPrice(priceRange[1]) }}</div>
    </section>

    <!-- 温度范围示例 -->
    <section class="demo-block">
      <h3>温度范围选择</h3>
      <RangePicker
          v-model="temperatureRange"
          :min="-20"
          :max="50"
          :step="1"
          :format="formatTemp"
          :disabled="true"
          placeholder-start="最低温"
          placeholder-end="最高温"
      />
      <div class="demo-value">温度区间: {{ formatTemp(temperatureRange[0]) }} - {{ formatTemp(temperatureRange[1]) }}</div>
    </section>
  </div>
</template>

<style scoped>
.range-picker-demo {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.demo-block {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

h3 {
  margin-bottom: 15px;
  font-size: 18px;
  color: #333;
  font-weight: 500;
}

.demo-value {
  margin-top: 10px;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
  border: 1px solid #e4e7ed;
}
</style>

📚测试代码正常跑通，附其他基本代码

添加路由
页面展示入口

📘编写路由 src\router\index.js

$\router\index.js$

import { createRouter, createWebHistory } from 'vue-router'
import RightClickMenuView from '../views/RightClickMenuView.vue'
import RangePickerView from '../views/RangePickerView.vue'


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'progress',
      component:  () => import('../views/ProgressView.vue'),
    },
    {
      path: '/tabs',
      name: 'tabs',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      // 标签页（Tabs）
      component: () => import('../views/TabsView.vue'),
    },
    {
      path: '/accordion',
      name: 'accordion',
      // 折叠面板（Accordion）
      component: () => import('../views/AccordionView.vue'),
    },
    {
      path: '/timeline',
      name: 'timeline',
      // 时间线（Timeline）
      component: () => import('../views/TimelineView.vue'),
    },
    {
      path: '/backToTop',
      name: 'backToTop',
      component: () => import('../views/BackToTopView.vue')
    },
    {
      path: '/notification',
      name: 'notification',
      component: () => import('../views/NotificationView.vue')
    },
    {
      path: '/card',
      name: 'card',
      component: () => import('../views/CardView.vue')
    },
    {
      path: '/infiniteScroll',
      name: 'infiniteScroll',
      component: () => import('../views/InfiniteScrollView.vue')
    },
    {
      path: '/switch',
      name: 'switch',
      component: () => import('../views/SwitchView.vue')
    },
    {
      path: '/sidebar',
      name: 'sidebar',
      component: () => import('../views/SidebarView.vue')
    },
    {
      path: '/breadcrumbs',
      name: 'breadcrumbs',
      component: () => import('../views/BreadcrumbsView.vue')
    },
    {
      path: '/masonryLayout',
      name: 'masonryLayout',
      component: () => import('../views/MasonryLayoutView.vue')
    },
    {
      path: '/rating',
      name: 'rating',
      component: () => import('../views/RatingView.vue')
    },
    {
      path: '/datePicker',
      name: 'datePicker',
      component: () => import('../views/DatePickerView.vue')
    },
    {
      path: '/colorPicker',
      name: 'colorPicker',
      component: () => import('../views/ColorPickerView.vue')
    },
    {
      path: '/rightClickMenu',
      name: 'rightClickMenu',
      component: RightClickMenuView
    },
    {
      path: '/rangePicker',
      name: 'rangePicker',
      component: () => import('../views/RangePickerView.vue')
    }
  ],
})

export default router

📘编写展示入口 src\App.vue

$src\App.vue$

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
      <nav>
        <RouterLink to="/">Progress</RouterLink>
        <RouterLink to="/tabs">Tabs</RouterLink>
        <RouterLink to="/accordion">Accordion</RouterLink>
        <RouterLink to="/timeline">Timeline</RouterLink>
        <RouterLink to="/backToTop">BackToTop</RouterLink>
        <RouterLink to="/notification">Notification</RouterLink>
        <RouterLink to="/card">Card</RouterLink>
        <RouterLink to="/infiniteScroll">InfiniteScroll</RouterLink>
        <RouterLink to="/switch">Switch</RouterLink>
        <RouterLink to="/sidebar">Sidebar</RouterLink>
        <RouterLink to="/breadcrumbs">Breadcrumbs</RouterLink>
        <RouterLink to="/masonryLayout">MasonryLayout</RouterLink>
        <RouterLink to="/rating">Rating</RouterLink>
        <RouterLink to="/datePicker">DatePicker</RouterLink>
        <RouterLink to="/colorPicker">ColorPicker</RouterLink>
        <RouterLink to="/rightClickMenu">RightClickMenu</RouterLink>
        <RouterLink to="/rangePicker">RangePicker</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>

📚页面效果

页面效果

📚相关文章

———— 相　关　文　章 ————

0基础3步部署自己的DeepSeek安装步骤
DeepSeek 助力 Vue 开发：打造丝滑的步骤条（Step bar）https://blog.csdn.net/qq_33650655/article/details/145560497
DeepSeek 助力 Vue 开发：打造丝滑的进度条（Progress Bar）https://blog.csdn.net/qq_33650655/article/details/145577034
自己部署 DeepSeek 助力 Vue 开发：打造丝滑的标签页（Tabs）https://blog.csdn.net/qq_33650655/article/details/145587999
自己部署 DeepSeek 助力 Vue 开发：打造丝滑的折叠面板（Accordion）https://blog.csdn.net/qq_33650655/article/details/145590404
自己部署 DeepSeek 助力 Vue 开发：打造丝滑的时间线（Timeline ）https://blog.csdn.net/qq_33650655/article/details/145597372
DeepSeek 助力 Vue 开发：打造丝滑的返回顶部按钮（Back to Top）https://blog.csdn.net/qq_33650655/article/details/145615550
DeepSeek 助力 Vue 开发：打造丝滑的通知栏（Notification Bar）https://blog.csdn.net/qq_33650655/article/details/145620055
DeepSeek 助力 Vue 开发：打造丝滑的卡片（Card）https://blog.csdn.net/qq_33650655/article/details/145634564
DeepSeek 助力 Vue 开发：打造丝滑的无限滚动（Infinite Scroll）https://blog.csdn.net/qq_33650655/article/details/145638452
DeepSeek 助力 Vue 开发：打造丝滑的开关切换（Switch）https://blog.csdn.net/qq_33650655/article/details/145644151
DeepSeek 助力 Vue 开发：打造丝滑的侧边栏（Sidebar）https://blog.csdn.net/qq_33650655/article/details/145654204
DeepSeek 助力 Vue 开发：打造丝滑的面包屑导航（Breadcrumbs）https://blog.csdn.net/qq_33650655/article/details/145656895
DeepSeek 助力 Vue 开发：打造丝滑的瀑布流布局（Masonry Layout）https://blog.csdn.net/qq_33650655/article/details/145663699
DeepSeek 助力 Vue 开发：打造丝滑的评分组件（Rating）https://blog.csdn.net/qq_33650655/article/details/145664576
DeepSeek 助力 Vue 开发：打造丝滑的日期选择器（Date Picker），未使用第三方插件 https://blog.csdn.net/qq_33650655/article/details/145673279
DeepSeek 助力 Vue 开发：打造丝滑的颜色选择器（Color Picker）https://blog.csdn.net/qq_33650655/article/details/145689522
DeepSeek 助力 Vue 开发：打造丝滑的右键菜单（RightClickMenu）https://blog.csdn.net/qq_33650655/article/details/145706658