宝码香车

DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_运动计划日历示例（CalendarView01_17）

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

DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_运动计划日历示例（CalendarView01_17）
- 前言
- 本文简介：
- 本文页面效果
- - 组件代码
- 代码测试
- 测试代码正常跑通，附其他基本代码
- - 编写路由 \src\router\index.js
  - 编写展示入口 \src\App.vue
- 本文页面效果
- 相关文章

️✍️️️️⚠️⬇️·正文开始⬇️·✅❓ 0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣*️⃣#️⃣

DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_运动计划日历示例（CalendarView01_17）

前言

DeepSeek-R1-0528 延续了2024年12月发布的DeepSeek V3 Base模型作为基础架构，不过在后续训练阶段加大了算力投入，这一举措让模型的思维深度和推理能力得到了显著增强。

升级后的R1模型表现亮眼，在数学运算、编程实践以及通用逻辑等多个基准测试中，取得了国内现有模型中的最优成绩。不仅如此，其整体性能已与o3、Gemini - 2.5 - Pro等国际顶尖模型相当。

本文简介：

本文是一个基于DeepSeek生成的日历组件的调用示例。
DeepSeek生成的日历组件文章DeepSeek 助力 Vue3 开发：打造丝滑的日历（Calendar）

本文页面效果

组件代码

\src\views\CalendarView01_17.vue

<template>
  <div class="demo">
    <h1>运动计划日历示例h1>
    <div class="workout-stats">
      <div class="stat-item">
        <span class="stat-label">本月运动span>
        <span class="stat-value">{{ monthlyWorkouts }}次span>
      div>
      <div class="stat-item">
        <span class="stat-label">累计时长span>
        <span class="stat-value">{{ totalDuration }}分钟span>
      div>
      <div class="stat-item">
        <span class="stat-label">消耗热量span>
        <span class="stat-value">{{ totalCalories }}千卡span>
      div>
    div>
    <Calendar
      theme="dark"
      :cell-size="60"
      locale="zh-cn"
      :current-date="today"
      @date-select="handleDateSelect"
    >
      <template #date-cell="{ date, isSelected }">
        <div :class="[
          'workout-cell',
          { 'is-selected': isSelected },
          { 'has-workout': getWorkout(date) }
        ]">
          <span class="date-number">{{ date.getDate() }}span>
          <div v-if="getWorkout(date)" class="workout-info">
            <span class="workout-type">{{ workoutIcons[getWorkout(date).type] }}span>
            <span class="workout-duration">{{ getWorkout(date).duration }}分钟span>
          div>
        div>
      template>
    Calendar>

    <div v-if="showWorkoutForm" class="workout-form">
      <h3>记录运动h3>
      <div class="form-content">
        <select v-model="newWorkout.type">
          <option value="running">‍♂️ 跑步option>
          <option value="cycling">‍♂️ 骑行option>
          <option value="swimming">‍♂️ 游泳option>
          <option value="yoga">‍♂️ 瑜伽option>
          <option value="gym"> 健身option>
        select>
        <input 
          type="number" 
          v-model="newWorkout.duration" 
          placeholder="运动时长(分钟)"
        >
        <div class="form-buttons">
          <button @click="saveWorkout">保存button>
          <button @click="showWorkoutForm = false">取消button>
        div>
      div>
    div>
  div>
template>

<script setup>
import { ref, computed } from 'vue'
import Calendar from '@/components/Calendar/Calendar.vue'

const today = new Date()
const workouts = ref(new Map())
const showWorkoutForm = ref(false)
const selectedDate = ref(null)
const newWorkout = ref({ type: 'running', duration: 30 })

const workoutIcons = {
  running: '‍♂️',
  cycling: '‍♂️',
  swimming: '‍♂️',
  yoga: '‍♂️',
  gym: ''
}

const monthlyWorkouts = computed(() => {
  let count = 0
  workouts.value.forEach((workout, dateStr) => {
    const date = new Date(dateStr)
    if (date.getMonth() === today.getMonth()) count++
  })
  return count
})

const totalDuration = computed(() => {
  let total = 0
  workouts.value.forEach(workout => {
    total += workout.duration
  })
  return total
})

const totalCalories = computed(() => {
  let total = 0
  workouts.value.forEach(workout => {
    // 简单的卡路里计算
    const caloriesPerMinute = {
      running: 10,
      cycling: 7,
      swimming: 8,
      yoga: 4,
      gym: 6
    }
    total += workout.duration * caloriesPerMinute[workout.type]
  })
  return total
})

const getWorkout = (date) => {
  return workouts.value.get(date.toDateString())
}

const handleDateSelect = (date) => {
  if (date > today) return
  selectedDate.value = date
  showWorkoutForm.value = true
}

const saveWorkout = () => {
  if (selectedDate.value && newWorkout.value.duration > 0) {
    workouts.value.set(selectedDate.value.toDateString(), {
      type: newWorkout.value.type,
      duration: parseInt(newWorkout.value.duration)
    })
    showWorkoutForm.value = false
    selectedDate.value = null
    newWorkout.value = { type: 'running', duration: 30 }
  }
}
script>

<style scoped>
.workout-stats {
  width: 420px;
  margin: 0 auto 20px;
  display: flex;
  justify-content: space-around;
  background: #333;
  padding: 20px;
  border-radius: 8px;
}

.stat-item {
  text-align: center;
  color: white;
}

.stat-label {
  display: block;
  color: #bbb;
  font-size: 14px;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #4caf50;
}

.workout-cell {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  padding: 4px;
  box-sizing: border-box;
}

.date-number {
  font-size: 16px;
  font-weight: 500;
}

.workout-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  margin-top: 4px;
}

.workout-type {
  font-size: 16px;
}

.workout-duration {
  font-size: 10px;
  color: #4caf50;
}

.has-workout {
  background: rgba(76, 175, 80, 0.1);
  border-radius: 4px;
}

.workout-form {
  width: 420px;
  margin: 20px auto 0;
  background: #333;
  padding: 20px;
  border-radius: 8px;
  color: white;
}

.workout-form h3 {
  margin: 0 0 16px;
  text-align: center;
  color: #bbb;
}

.form-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-content select,
.form-content input {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #555;
  background: #2d2d2d;
  color: white;
}

.form-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.form-buttons button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: #4caf50;
  color: white;
}

.form-buttons button:last-child {
  background: #666;
}

.demo :deep(.calendar) {
  width: 100%;
  max-width: 470px;
  margin: 0 auto;
}

.demo :deep(.date-cell) {
  width: 60px !important;
  height: 60px !important;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.demo :deep(.theme-dark .current-month .date-number) {
  color: #000;
}
/* 日历布局样式... */
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')
    },
    {
      path: '/navbar',
      name: 'navbar',
      component: () => import('../views/NavbarView.vue')
    },
    {
      path: '/formValidation',
      name: 'formValidation',
      component: () => import('../views/FormValidationView.vue')
    },
    {
      path: '/copyToClipboard',
      name: 'copyToClipboard',
      component: () => import('../views/CopyToClipboardView.vue')
    },
    {
      path: '/clickAnimations',
      name: 'clickAnimations',
      component: () => import('../views/ClickAnimationsView.vue')
    },
    {
      path: '/thumbnailList',
      name: 'thumbnailList',
      component: () => import('../views/ThumbnailListView.vue')
    },
    {
      path: '/keyboardShortcuts',
      name: 'keyboardShortcuts',
      component: () => import('../views/KeyboardShortcutsView.vue')
    },
    {
      path: '/commentSystem',
      name: 'commentSystem',
      component: () => import('../views/CommentSystemView.vue')
    },
    {
      path: '/qRCode',
      name: 'qRCode',
      component: () => import('../views/QRCodeView.vue')
    },
    {
      path: '/radioButton',
      name: 'radioButton',
      component: () => import('../views/RadioButtonView.vue')
    },
    {
      path: '/slider',
      name: 'slider',
      component: () => import('../views/SliderView.vue')
    },
    {
      path: '/scrollAnimations',
      name: 'scrollAnimations',
      component: () => import('../views/ScrollAnimationsView.vue')
    },
    {
      path: '/textInputView',
      name: 'textInputView',
      component: () => import('../views/TextInputView.vue')
    },
    {
      path: '/divider',
      name: 'divider',
      component: () => import('../views/DividerView.vue')
    },
    {
      path: '/checkbox',
      name: 'checkbox',
      component: () => import('../views/CheckboxView.vue')
    },
    {
      path: '/tagInput',
      name: 'tagInput',
      component: () => import('../views/TagInputView.vue')
    },
    {
      path: '/dropdownSelect',
      name: 'dropdownSelect',
      component: () => import('../views/DropdownSelectView.vue')
    },
    {
      path: '/list',
      name: 'list',
      component: () => import('../views/ListView.vue')
    },
    {
      path: '/header',
      name: 'header',
      component: () => import('../views/HeaderView.vue')
    },
    {
      path: '/footer',
      name: 'footer',
      component: () => import('../views/FooterView.vue')
    },
    {
      path: '/pagination',
      name: 'pagination',
      component: () => import('../views/PaginationView.vue')
    },
    {
      path: '/floatingActionButton',
      name: 'floatingActionButton',
      component: () => import('../views/FloatingActionButtonView.vue')
    },
    {
      path: '/gridLayout',
      name: 'gridLayout',
      component: () => import('../views/GridLayoutView.vue')
    },
    {
      path: '/passwordInput',
      name: 'passwordInput',
      component: () => import('../views/PasswordInputView.vue')
    },
    {
      path: '/flexbox',
      name: 'flexbox',
      component: () => import('../views/FlexboxView.vue')
    },
    {
      path: '/modal',
      name: 'modal',
      component: () => import('../views/ModalView.vue')
    },
    {
      path: '/richTextEditor',
      name: 'richTextEditor',
      component: () => import('../views/RichTextEditorView.vue')
    },
    {
      path: '/timePickerView',
      name: 'timePickerView',
      component: () => import('../views/TimePickerView.vue')
    },
    {
      path: '/multistepForm',
      name: 'multistepForm',
      component: () => import('../views/MultistepFormView.vue')
    },
    {
      path: '/table1',
      name: 'table1',
      component: () => import('../views/TableView1.vue')
    },
    {
      path: '/table2',
      name: 'table2',
      component: () => import('../views/TableView2.vue')
    },
    {
      path: '/table3',
      name: 'table3',
      component: () => import('../views/TableView3.vue')
    },
    {
      path: '/table4',
      name: 'table4',
      component: () => import('../views/TableView4.vue')
    },
    {
      path: '/table5',
      name: 'table5',
      component: () => import('../views/TableView5.vue')
    },
    {
      path: '/table6',
      name: 'table6',
      component: () => import('../views/TableView6.vue')
    },
    {
      path: '/table7',
      name: 'table7',
      component: () => import('../views/TableView7.vue')
    },
    {
      path: '/table8',
      name: 'table8',
      component: () => import('../views/TableView8.vue')
    },
    {
      path: '/table9',
      name: 'table9',
      component: () => import('../views/TableView9.vue')
    },
    {
      path: '/table10',
      name: 'table10',
      component: () => import('../views/TableView10.vue')
    },
    {
      path: '/table11',
      name: 'table11',
      component: () => import('../views/TableView11.vue')
    },
    {
      path: '/table12',
      name: 'table12',
      component: () => import('../views/TableView12.vue')
    },
    {
      path: '/table12_02',
      name: 'table12_02',
      component: () => import('../views/TableView12_02.vue')
    },
    {
      path: '/table14',
      name: 'table14',
      component: () => import('../views/TableView14.vue')
    },
    {
      path: '/table14_01',
      name: 'table14_01',
      component: () => import('../views/TableView14_01.vue')
    },
    {
      path: '/table14_02',
      name: 'table14_02',
      component: () => import('../views/TableView14_02.vue')
    },
    {
      path: '/table14_03',
      name: 'table14_03',
      component: () => import('../views/TableView14_03.vue')
    },
    {
      path: '/table14_04',
      name: 'table14_04',
      component: () => import('../views/TableView14_04.vue')
    },
    {
      path: '/table14_05',
      name: 'table14_05',
      component: () => import('../views/TableView14_05.vue')
    },
    {
      path: '/table14_06',
      name: 'table14_06',
      component: () => import('../views/TableView14_06.vue')
    },
    {
      path: '/table14_07',
      name: 'table14_07',
      component: () => import('../views/TableView14_07.vue')
    },
    {
      path: '/table14_08',
      name: 'table14_08',
      component: () => import('../views/TableView14_08.vue')
    },
    {
      path: '/table14_09',
      name: 'table14_09',
      component: () => import('../views/TableView14_09.vue')
    },
    {
      path: '/table14_10',
      name: 'table14_10',
      component: () => import('../views/TableView14_10.vue')
    },
    {
      path: '/table14_11',
      name: 'table14_11',
      component: () => import('../views/TableView14_11.vue')
    },
    {
      path: '/table14_12',
      name: 'table14_12',
      component: () => import('../views/TableView14_12.vue')
    },
    {
      path: '/table14_13',
      name: 'table14_13',
      component: () => import('../views/TableView14_13.vue')
    },
    {
      path: '/table14_14',
      name: 'table14_14',
      component: () => import('../views/TableView14_14.vue')
    },
    {
      path: '/table15',
      name: 'table15',
      component: () => import('../views/TableView15.vue')
    },
    {
      path: '/table15_01',
      name: 'table15_01',
      component: () => import('../views/TableView15_01.vue')
    },
    {
      path: '/table15_02',
      name: 'table15_02',
      component: () => import('../views/TableView15_02.vue')
    },
    {
      path: '/table15_03',
      name: 'table15_03',
      component: () => import('../views/TableView15_03.vue')
    },
    {
      path: '/table15_04',
      name: 'table15_04',
      component: () => import('../views/TableView15_04.vue')
    },
    {
      path: '/table15_05',
      name: 'table15_05',
      component: () => import('../views/TableView15_05.vue')
    },
    {
      path: '/table15_06',
      name: 'table15_06',
      component: () => import('../views/TableView15_06.vue')
    },
    {
      path: '/table15_07',
      name: 'table15_07',
      component: () => import('../views/TableView15_07.vue')
    },
    {
      path: '/table15_08',
      name: 'table15_08',
      component: () => import('../views/TableView15_08.vue')
    },
    {
      path: '/table15_09',
      name: 'table15_09',
      component: () => import('../views/TableView15_09.vue')
    },
    {
      path: '/table15_10',
      name: 'table15_10',
      component: () => import('../views/TableView15_10.vue')
    },
    {
      path: '/table15_11',
      name: 'table15_11',
      component: () => import('../views/TableView15_11.vue')
    },
    {
      path: '/table15_12',
      name: 'table15_12',
      component: () => import('../views/TableView15_12.vue')
    },
    {
      path: '/table15_13',
      name: 'table15_13',
      component: () => import('../views/TableView15_13.vue')
    },
    {
      path: '/table15_14',
      name: 'table15_14',
      component: () => import('../views/TableView15_14.vue')
    },
    {
      path: '/table16',
      name: 'table16',
      component: () => import('../views/TableView16.vue')
    },
    {
      path: '/table16_01',
      name: 'table16_01',
      component: () => import('../views/TableView16_01.vue')
    },
    {
      path: '/table16_02',
      name: 'table16_02',
      component: () => import('../views/TableView16_02.vue')
    },
    {
      path: '/table16_03',
      name: 'table16_03',
      component: () => import('../views/TableView16_03.vue')
    },
    {
      path: '/table16_04',
      name: 'table16_04',
      component: () => import('../views/TableView16_04.vue')
    },
    {
      path: '/table16_05',
      name: 'table16_05',
      component: () => import('../views/TableView16_05.vue')
    },
    {
      path: '/table16_06',
      name: 'table16_06',
      component: () => import('../views/TableView16_06.vue')
    },
    {
      path: '/table16_07',
      name: 'table16_07',
      component: () => import('../views/TableView16_07.vue')
    },
    {
      path: '/table16_08',
      name: 'table16_08',
      component: () => import('../views/TableView16_08.vue')
    },
    {
      path: '/table16_09',
      name: 'table16_09',
      component: () => import('../views/TableView16_09.vue')
    },
    {
      path: '/table16_10',
      name: 'table16_10',
      component: () => import('../views/TableView16_10.vue')
    },
    {
      path: '/table16_11',
      name: 'table16_11',
      component: () => import('../views/TableView16_11.vue')
    },
    {
      path: '/table16_12',
      name: 'table16_12',
      component: () => import('../views/TableView16_12.vue')
    },
    {
      path: '/table16_13',
      name: 'table16_13',
      component: () => import('../views/TableView16_13.vue')
    },
    {
      path: '/table16_14',
      name: 'table16_14',
      component: () => import('../views/TableView16_14.vue')
    },
    {
      path: '/table17',
      name: 'table17',
      component: () => import('../views/TableView17.vue')
    },
    {
      path: '/calendar',
      name: 'calendar',
      component: () => import('../views/CalendarView.vue')
    },
    {
      path: '/calendar01_01',
      name: 'calendar01_01',
      component: () => import('../views/CalendarView01_01.vue')
    },
    {
      path: '/calendar01_02',
      name: 'calendar01_02',
      component: () => import('../views/CalendarView01_02.vue')
    },
    {
      path: '/calendar01_03',
      name: 'calendar01_03',
      component: () => import('../views/CalendarView01_03.vue')
    },
    {
      path: '/calendar01_04',
      name: 'calendar01_04',
      component: () => import('../views/CalendarView01_04.vue')
    },
    {
      path: '/calendar01_05',
      name: 'calendar01_05',
      component: () => import('../views/CalendarView01_05.vue')
    },
    {
      path: '/calendar01_06',
      name: 'calendar01_06',
      component: () => import('../views/CalendarView01_06.vue')
    },
    {
      path: '/calendar01_07',
      name: 'calendar01_07',
      component: () => import('../views/CalendarView01_07.vue')
    },
    {
      path: '/calendar01_08',
      name: 'calendar01_08',
      component: () => import('../views/CalendarView01_08.vue')
    },
    {
      path: '/calendar01_09',
      name: 'calendar01_09',
      component: () => import('../views/CalendarView01_09.vue')
    },
    {
      path: '/calendar01_10',
      name: 'calendar01_10',
      component: () => import('../views/CalendarView01_10.vue')
    },
    {
      path: '/calendar01_11',
      name: 'calendar01_11',
      component: () => import('../views/CalendarView01_11.vue')
    },
    {
      path: '/calendar01_12',
      name: 'calendar01_12',
      component: () => import('../views/CalendarView01_12.vue')
    },
    {
      path: '/calendar01_13',
      name: 'calendar01_13',
      component: () => import('../views/CalendarView01_13.vue')
    },
    {
      path: '/calendar01_14',
      name: 'calendar01_14',
      component: () => import('../views/CalendarView01_14.vue')
    },
    {
      path: '/calendar01_15',
      name: 'calendar01_15',
      component: () => import('../views/CalendarView01_15.vue')
    },
    {
      path: '/calendar01_16',
      name: 'calendar01_16',
      component: () => import('../views/CalendarView01_16.vue')
    },
    {
      path: '/calendar01_17',
      name: 'calendar01_17',
      component: () => import('../views/CalendarView01_17.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="/">ProgressRouterLink>
        <RouterLink to="/tabs">TabsRouterLink>
        <RouterLink to="/accordion">AccordionRouterLink>
        <RouterLink to="/timeline">TimelineRouterLink>
        <RouterLink to="/backToTop">BackToTopRouterLink>
        <RouterLink to="/notification">NotificationRouterLink>
        <RouterLink to="/card">CardRouterLink>
        <RouterLink to="/infiniteScroll">InfiniteScrollRouterLink>
        <RouterLink to="/switch">SwitchRouterLink>
        <RouterLink to="/sidebar">SidebarRouterLink>
        <RouterLink to="/breadcrumbs">BreadcrumbsRouterLink>
        <RouterLink to="/masonryLayout">MasonryLayoutRouterLink>
        <RouterLink to="/rating">RatingRouterLink>
        <RouterLink to="/datePicker">DatePickerRouterLink>
        <RouterLink to="/colorPicker">ColorPickerRouterLink>
        <RouterLink to="/rightClickMenu">RightClickMenuRouterLink>
        <RouterLink to="/rangePicker">RangePickerRouterLink>
        <RouterLink to="/navbar">NavbarRouterLink>
        <RouterLink to="/formValidation">FormValidationRouterLink>
        <RouterLink to="/copyToClipboard">CopyToClipboardRouterLink>
        <RouterLink to="/clickAnimations">ClickAnimationsRouterLink>
        <RouterLink to="/thumbnailList">ThumbnailListRouterLink>
        <RouterLink to="/keyboardShortcuts">KeyboardShortcutsRouterLink>
        <RouterLink to="/commentSystem">CommentSystemRouterLink>
        <RouterLink to="/qRCode">QRCodeRouterLink>
        <RouterLink to="/radioButton">RadioButtonRouterLink>
        <RouterLink to="/slider">SliderRouterLink>
        <RouterLink to="/scrollAnimations">ScrollAnimationsRouterLink>
        <RouterLink to="/textInputView">TextInputRouterLink>
        <RouterLink to="/divider">DividerRouterLink>
        <RouterLink to="/checkbox">CheckboxRouterLink>
        <RouterLink to="/tagInput">TagInputRouterLink>
        <RouterLink to="/dropdownSelect">DropdownSelectRouterLink>
        <RouterLink to="/list">ListRouterLink>
        <RouterLink to="/header">HeaderRouterLink>
        <RouterLink to="/footer">FooterRouterLink>
        <RouterLink to="/pagination">PaginationRouterLink>
        <RouterLink to="/floatingActionButton">FloatingActionButtonRouterLink>
        <RouterLink to="/gridLayout">GridLayoutRouterLink>
        <RouterLink to="/passwordInput">PasswordInputRouterLink>
        <RouterLink to="/flexbox">FlexboxRouterLink>
        <RouterLink to="/modal">ModalRouterLink>
        <RouterLink to="/richTextEditor">RichTextEditorRouterLink>
        <RouterLink to="/timePickerView">TimePickerViewRouterLink>
        <RouterLink to="/multistepForm">MultistepFormViewRouterLink>
        <RouterLink to="/table1">Table1RouterLink>
        <RouterLink to="/table2">Table2RouterLink>
        <RouterLink to="/table3">Table3RouterLink>
        <RouterLink to="/table4">Table4RouterLink>
        <RouterLink to="/table5">Table5RouterLink>
        <RouterLink to="/table6">Table6空状态RouterLink>
        <RouterLink to="/table7">Table7空状态2RouterLink>
        <RouterLink to="/table8">Table8基础加载状态RouterLink>
        <RouterLink to="/table9">Table9自定义加载文本RouterLink>
        <RouterLink to="/table10">Table10完全自定义加载内容RouterLink>
        <RouterLink to="/table11">Table11加载结合分页RouterLink>
        <RouterLink to="/table12">Table12启用列宽调整RouterLink>
        <RouterLink to="/table12_02">table12_02自定义选择列宽度RouterLink>
        <RouterLink to="/table14">table14 添加表头固定功能RouterLink>
        <RouterLink to="/table14_01">table14_01RouterLink>
        <RouterLink to="/table14_02">table14_02RouterLink>
        <RouterLink to="/table14_03">table14_03RouterLink>
        <RouterLink to="/table14_04">table14_04RouterLink>
        <RouterLink to="/table14_05">table14_05RouterLink>
        <RouterLink to="/table14_06">table14_06RouterLink>
        <RouterLink to="/table14_07">table14_07RouterLink>
        <RouterLink to="/table14_08">table14_08RouterLink>
        <RouterLink to="/table14_09">table14_09RouterLink>
        <RouterLink to="/table14_10">table14_10RouterLink>
        <RouterLink to="/table14_11">table14_11RouterLink>
        <RouterLink to="/table14_12">table14_12RouterLink>
        <RouterLink to="/table14_13">table14_13RouterLink>
        <RouterLink to="/table14_14">table14_14RouterLink>
        <RouterLink to="/table15">table15 导出数据功能RouterLink>
        <RouterLink to="/table15_01">table15_01RouterLink>
        <RouterLink to="/table15_02">table15_02RouterLink>
        <RouterLink to="/table15_03">table15_03RouterLink>
        <RouterLink to="/table15_04">table15_04RouterLink>
        <RouterLink to="/table15_05">table15_05RouterLink>
        <RouterLink to="/table15_06">table15_06RouterLink>
        <RouterLink to="/table15_07">table15_07RouterLink>
        <RouterLink to="/table15_08">table15_08RouterLink>
        <RouterLink to="/table15_09">table15_09RouterLink>
        <RouterLink to="/table15_10">table15_10RouterLink>
        <RouterLink to="/table15_11">table15_11RouterLink>
        <RouterLink to="/table15_12">table15_12RouterLink>
        <RouterLink to="/table15_13">table15_13RouterLink>
        <RouterLink to="/table15_14">table15_14RouterLink>
        <RouterLink to="/table16">table16添加行拖拽排序功能RouterLink>
        <RouterLink to="/table16_01">table16_01RouterLink>
        <RouterLink to="/table16_02">table16_02RouterLink>
        <RouterLink to="/table16_03">table16_03RouterLink>
        <RouterLink to="/table16_04">table16_04RouterLink>
        <RouterLink to="/table16_05">table16_05RouterLink>
        <RouterLink to="/table16_06">table16_06RouterLink>
        <RouterLink to="/table16_07">table16_07RouterLink>
        <RouterLink to="/table16_08">table16_08RouterLink>
        <RouterLink to="/table16_09">table16_09RouterLink>
        <RouterLink to="/table16_10">table16_10RouterLink>
        <RouterLink to="/table16_11">table16_11RouterLink>
        <RouterLink to="/table16_12">table16_12RouterLink>
        <RouterLink to="/table16_13">table16_13RouterLink>
        <RouterLink to="/table16_14">table16_14RouterLink>
        <RouterLink to="/calendar">日历（Calendar）RouterLink>
        <RouterLink to="/calendar01_01">日历_基础功能示例（CalendarView01_01）RouterLink>
        <RouterLink to="/calendar01_02">日历_日期范围选择示例（CalendarView01_02）RouterLink>
        <RouterLink to="/calendar01_03">日历_深色主题示例（CalendarView01_03）RouterLink>
        <RouterLink to="/calendar01_04">日历_工作日高亮显示示例（CalendarView01_04）RouterLink>
        <RouterLink to="/calendar01_05">日历_今日按钮示例（CalendarView01_05）RouterLink>
        <RouterLink to="/calendar01_06">日历_日期范围限制示例（CalendarView01_06）RouterLink>
        <RouterLink to="/calendar01_07">日历_自定义单元格大小示例（CalendarView01_07）RouterLink>
        <RouterLink to="/calendar01_08">日历_自定义周起始日示例（CalendarView01_08）RouterLink>
        <RouterLink to="/calendar01_09">日历_生日年龄计算示例（CalendarView01_09）RouterLink>
        <RouterLink to="/calendar01_10">日历_自定义当前日期示例（CalendarView01_10）RouterLink>
        <RouterLink to="/calendar01_11">日历_节假日倒计时示例（CalendarView01_11）RouterLink>
        <RouterLink to="/calendar01_12">日历_日历签到打卡示例（CalendarView01_12）RouterLink>
        <RouterLink to="/calendar01_13">日历_日历心情记录示例（CalendarView01_13）RouterLink>
        <RouterLink to="/calendar01_14">日历_德语本地化与日期范围示例（CalendarView01_14）RouterLink>
        <RouterLink to="/calendar01_15">日历_西班牙语无头部显示示例（CalendarView01_15）RouterLink>
        <RouterLink to="/calendar01_16">日历_倒班排班日历示例（CalendarView01_16）RouterLink>
        <RouterLink to="/calendar01_17">日历_运动计划日历示例（CalendarView01_17）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>

本文页面效果

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

118. DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_倒班排班日历示例（CalendarView01_16）
https://blog.csdn.net/qq_33650655/article/details/148363240

117. DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_西班牙语无头部显示示例（CalendarView01_15）
https://blog.csdn.net/qq_33650655/article/details/148201378

116. DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_德语本地化与日期范围示例（CalendarView01_14）
https://blog.csdn.net/qq_33650655/article/details/148048189

115. DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_日历心情记录示例（CalendarView01_13）
https://blog.csdn.net/qq_33650655/article/details/147881038

114. DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_日历签到打卡示例（CalendarView01_12）
https://blog.csdn.net/qq_33650655/article/details/147690584

113. DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_节假日倒计时示例（CalendarView01_11）
https://blog.csdn.net/qq_33650655/article/details/147570774

112. DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_自定义当前日期示例（CalendarView01_10） https://blog.csdn.net/qq_33650655/article/details/147373561

111. DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_生日年龄计算示例（CalendarView01_09） https://blog.csdn.net/qq_33650655/article/details/147373402

110. DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_自定义周起始日示例（CalendarView01_08） https://blog.csdn.net/qq_33650655/article/details/147373245

109. DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_自定义单元格大小示例（CalendarView01_07） https://blog.csdn.net/qq_33650655/article/details/147190839

108. DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_日期范围限制示例（CalendarView01_06） https://blog.csdn.net/qq_33650655/article/details/147157592

107. DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_今日按钮示例（CalendarView01_05） https://blog.csdn.net/qq_33650655/article/details/147157560

106. DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_工作日高亮显示示例（CalendarView01_04） https://blog.csdn.net/qq_33650655/article/details/147157336

105. DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_深色主题示例（CalendarView01_03） https://blog.csdn.net/qq_33650655/article/details/147157242

104. DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_日期范围选择示例（CalendarView01_02） https://blog.csdn.net/qq_33650655/article/details/147141837

103. DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_基础功能示例（CalendarView01_01） https://blog.csdn.net/qq_33650655/article/details/147141583

102. DeepSeek 助力 Vue3 开发：打造丝滑的日历（Calendar） https://blog.csdn.net/qq_33650655/article/details/147083574

101. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例14，TableView16_14 拖拽自动保存示例 https://blog.csdn.net/qq_33650655/article/details/146795055

100. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例13，TableView16_13 键盘辅助拖拽示例 https://blog.csdn.net/qq_33650655/article/details/146794579

99. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例12，TableView16_12 拖拽动画示例 https://blog.csdn.net/qq_33650655/article/details/146545665

98. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例11，TableView16_11 拖拽与行编辑结合示例 https://blog.csdn.net/qq_33650655/article/details/146545654

97. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例10，TableView16_10 虚拟滚动拖拽示例 https://blog.csdn.net/qq_33650655/article/details/146545647

96. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例9，TableView16_09 嵌套表格拖拽排序 https://blog.csdn.net/qq_33650655/article/details/146545641

95. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例8，TableView16_08 筛选状态拖拽排序 https://blog.csdn.net/qq_33650655/article/details/146545632

94. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例7，TableView16_07 列拖拽排序示例 https://blog.csdn.net/qq_33650655/article/details/146351099

93. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例6，TableView16_06 分页表格拖拽排序 https://blog.csdn.net/qq_33650655/article/details/146517627

92. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例5，TableView16_05 树形表格拖拽排序 https://blog.csdn.net/qq_33650655/article/details/146517619

91. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例4，TableView16_04 跨表格拖拽示例 https://blog.csdn.net/qq_33650655/article/details/146517613

90. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例3，TableView16_03 拖拽视觉反馈示例 https://blog.csdn.net/qq_33650655/article/details/146517501

89. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例2，TableView16_02.vue 拖拽视觉反馈示例 https://blog.csdn.net/qq_33650655/article/details/146351077

88. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例1，TableView16_01.vue 基础行拖拽排序示例 https://blog.csdn.net/qq_33650655/article/details/146516134

87. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能 https://blog.csdn.net/qq_33650655/article/details/146351051

86. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加导出数据功能示例14，TableView15_14多功能组合的导出表格示例 https://blog.csdn.net/qq_33650655/article/details/146351297

85. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加导出数据功能示例13，TableView15_13可调整列宽的导出表格示例 https://blog.csdn.net/qq_33650655/article/details/146351271

84. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加导出数据功能示例12，TableView15_12固定表头的导出表格示例 https://blog.csdn.net/qq_33650655/article/details/146351254

83. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加导出数据功能示例11，TableView15_11带分页的导出表格示例 https://blog.csdn.net/qq_33650655/article/details/146351224

82. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加导出数据功能示例10，TableView15_10带搜索的导出表格示例 https://blog.csdn.net/qq_33650655/article/details/146351196

81. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加导出数据功能示例9，TableView15_09带排序的导出表格示例 https://blog.csdn.net/qq_33650655/article/details/146351181

80. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加导出数据功能示例8，TableView15_08带选择框的导出表格示例 https://blog.csdn.net/qq_33650655/article/details/146351159

79. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加导出数据功能示例7，TableView15_07带边框和斑马纹的导出表格示例 https://blog.csdn.net/qq_33650655/article/details/146351137

78. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加导出数据功能示例6，TableView15_06自定义导出文件名示例 https://blog.csdn.net/qq_33650655/article/details/146383261

77. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加导出数据功能示例5，TableView15_05自定义导出按钮文本示例 https://blog.csdn.net/qq_33650655/article/details/146383279

76. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加导出数据功能示例4，TableView15_04导出当前页数据示例 https://blog.csdn.net/qq_33650655/article/details/146382664

75. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加导出数据功能示例3，TableView15_03导出全部数据示例 https://blog.csdn.net/qq_33650655/article/details/146351008

74. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加导出数据功能示例2，TableView15_02导出为CSV格式示例 https://blog.csdn.net/qq_33650655/article/details/146350878

73. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加导出数据功能示例1，TableView15_01基础导出功能示例 https://blog.csdn.net/qq_33650655/article/details/146349203

72. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加导出数据功能 https://blog.csdn.net/qq_33650655/article/details/146329292

71. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_14树形数据的固定表头表格 https://blog.csdn.net/qq_33650655/article/details/146162213

70. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_13可展开行的固定表头表格 https://blog.csdn.net/qq_33650655/article/details/146162201

69. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_12自定义表头的固定表头表格 https://blog.csdn.net/qq_33650655/article/details/146162186

68. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_11多功能组合的固定表头表格 https://blog.csdn.net/qq_33650655/article/details/146162175

67. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_10空状态的固定表头表格 https://blog.csdn.net/qq_33650655/article/details/146162165

66. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_09自定义单元格的固定表头表格 https://blog.csdn.net/qq_33650655/article/details/146162151

65. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_08带加载状态的固定表头表格 https://blog.csdn.net/qq_33650655/article/details/146162142

64. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_07带分页的固定表头表格 https://blog.csdn.net/qq_33650655/article/details/146162135

63. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_06带搜索功能的固定表头表格 https://blog.csdn.net/qq_33650655/article/details/146162127

62. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_05可排序的固定表头表格 https://blog.csdn.net/qq_33650655/article/details/146162098

61. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_04带选择框的固定表头表格 https://blog.csdn.net/qq_33650655/article/details/146162076

60. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_03可调整列宽的固定表头表格 https://blog.csdn.net/qq_33650655/article/details/146162057

59. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_02带边框和斑马纹的固定表头表格 https://blog.csdn.net/qq_33650655/article/details/146162045

58. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_01基础固定表头示例 https://blog.csdn.net/qq_33650655/article/details/146162035

57. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14基础固定表头示例https://blog.csdn.net/qq_33650655/article/details/146166033

56. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之功能优化，添加列宽调整功能Table12 https://blog.csdn.net/qq_33650655/article/details/146139452

55. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之功能优化，加载结合分页 ,Table11加载结合分页 https://blog.csdn.net/qq_33650655/article/details/146049727

54. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之功能优化，完全自定义加载内容,Table10完全自定义加载内容 https://blog.csdn.net/qq_33650655/article/details/146049663

53. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之功能优化，自定义加载文本,Table9自定义加载文本https://blog.csdn.net/qq_33650655/article/details/146049592

52. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之功能优化，基础加载状态,Table8基础加载状态 https://blog.csdn.net/qq_33650655/article/details/146049283

51. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之功能优化，添加表格空状态提示，带插图的空状态，Table7空状态2 https://blog.csdn.net/qq_33650655/article/details/146046044

50. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之功能优化，添加表格空状态提示 https://blog.csdn.net/qq_33650655/article/details/146042249

49. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）示例5: 搜索和过滤 https://blog.csdn.net/qq_33650655/article/details/146025532

48. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）示例4: 自定义插槽 https://blog.csdn.net/qq_33650655/article/details/146025513

47. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）示例3: 行选择 https://blog.csdn.net/qq_33650655/article/details/146025478

46. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）示例2: 分页和排序 https://blog.csdn.net/qq_33650655/article/details/146025347

45. DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）示例1：基础表格 https://blog.csdn.net/qq_33650655/article/details/145939144

44. DeepSeek 助力 Vue3 开发：打造丝滑的时间选择器（Time Picker）https://blog.csdn.net/qq_33650655/article/details/145939053

43. DeepSeek 助力 Vue3 开发：打造丝滑的模态框（Modal）https://blog.csdn.net/qq_33650655/article/details/145938939

42. DeepSeek 助力 Vue3 开发：打造丝滑的弹性布局（Flexbox）https://blog.csdn.net/qq_33650655/article/details/145938677

41. DeepSeek 助力 Vue3 开发：打造丝滑的密码输入框（Password Input））https://blog.csdn.net/qq_33650655/article/details/145903079

40. DeepSeek 助力 Vue3 开发：打造丝滑的网格布局（Grid Layout）https://blog.csdn.net/qq_33650655/article/details/145893422

39. DeepSeek 助力 Vue3 开发：打造丝滑的悬浮按钮（Floating Action Button）
https://blog.csdn.net/qq_33650655/article/details/145888339

38. DeepSeek 助力 Vue3 开发：打造丝滑的分页（Pagination）https://blog.csdn.net/qq_33650655/article/details/145886824

37. DeepSeek 助力 Vue3 开发：打造丝滑的页脚（Footer）https://blog.csdn.net/qq_33650655/article/details/145886306

36. DeepSeek 助力 Vue3 开发：打造丝滑的页眉（Header）https://blog.csdn.net/qq_33650655/article/details/145885122

35. DeepSeek 助力 Vue3 开发：打造丝滑的列表（List）https://blog.csdn.net/qq_33650655/article/details/145866384

34. DeepSeek 助力 Vue3 开发：打造丝滑的下拉选择框（Dropdown Select）https://blog.csdn.net/qq_33650655/article/details/145861882

33. DeepSeek 助力 Vue3 开发：打造丝滑的标签输入（Tag Input）https://blog.csdn.net/qq_33650655/article/details/145858574

32. DeepSeek 助力 Vue 开发：打造丝滑的复选框（Checkbox）https://blog.csdn.net/qq_33650655/article/details/145855695

31. DeepSeek 助力 Vue 开发：打造丝滑的分割线（Divider）https://blog.csdn.net/qq_33650655/article/details/145849100

30. DeepSeek 助力 Vue 开发：打造丝滑的文本输入框（Text Input）https://blog.csdn.net/qq_33650655/article/details/145837003

29. DeepSeek 助力 Vue 开发：打造丝滑的滚动动画（Scroll Animations）https://blog.csdn.net/qq_33650655/article/details/145818571

28. DeepSeek 助力 Vue 开发：打造丝滑的滑块（Slider）https://blog.csdn.net/qq_33650655/article/details/145817161

27. DeepSeek 助力 Vue 开发：打造丝滑的单选按钮（Radio Button）https://blog.csdn.net/qq_33650655/article/details/145810620

26. DeepSeek 助力 Vue 开发：打造丝滑的二维码生成（QR Code）https://blog.csdn.net/qq_33650655/article/details/145797928

25. DeepSeek 助力 Vue 开发：打造丝滑的评论系统（Comment System）https://blog.csdn.net/qq_33650655/article/details/145781104

24. DeepSeek 助力 Vue 开发：打造丝滑的键盘快捷键（Keyboard Shortcuts） https://blog.csdn.net/qq_33650655/article/details/145780227

23. DeepSeek 助力 Vue 开发：打造丝滑的缩略图列表（Thumbnail List）https://blog.csdn.net/qq_33650655/article/details/145776679

22. DeepSeek 助力 Vue 开发：打造丝滑的点击动画（Click Animations）https://blog.csdn.net/qq_33650655/article/details/145766184

21. DeepSeek 助力 Vue 开发：打造丝滑的复制到剪贴板（Copy to Clipboard）https://blog.csdn.net/qq_33650655/article/details/145739569

20. DeepSeek 助力 Vue 开发：打造丝滑的表单验证（Form Validation）https://blog.csdn.net/qq_33650655/article/details/145735582

19. DeepSeek 助力 Vue 开发：打造丝滑的导航栏（Navbar）https://blog.csdn.net/qq_33650655/article/details/145732421

18. DeepSeek 助力 Vue 开发：打造丝滑的范围选择器（Range Picker）https://blog.csdn.net/qq_33650655/article/details/145713572

17. DeepSeek 助力 Vue 开发：打造丝滑的右键菜单（RightClickMenu）https://blog.csdn.net/qq_33650655/article/details/145706658

16. DeepSeek 助力 Vue 开发：打造丝滑的颜色选择器（Color Picker）https://blog.csdn.net/qq_33650655/article/details/145689522

15. DeepSeek 助力 Vue 开发：打造丝滑的日期选择器（Date Picker），未使用第三方插件 https://blog.csdn.net/qq_33650655/article/details/145673279

14. DeepSeek 助力 Vue 开发：打造丝滑的评分组件（Rating）https://blog.csdn.net/qq_33650655/article/details/145664576

13. DeepSeek 助力 Vue 开发：打造丝滑的瀑布流布局（Masonry Layout）https://blog.csdn.net/qq_33650655/article/details/145663699

12. DeepSeek 助力 Vue 开发：打造丝滑的面包屑导航（Breadcrumbs）https://blog.csdn.net/qq_33650655/article/details/145656895

11. DeepSeek 助力 Vue 开发：打造丝滑的侧边栏（Sidebar）https://blog.csdn.net/qq_33650655/article/details/145654204

10. DeepSeek 助力 Vue 开发：打造丝滑的开关切换（Switch）https://blog.csdn.net/qq_33650655/article/details/145644151

9. DeepSeek 助力 Vue 开发：打造丝滑的无限滚动（Infinite Scroll）https://blog.csdn.net/qq_33650655/article/details/145638452

8. DeepSeek 助力 Vue 开发：打造丝滑的卡片（Card）https://blog.csdn.net/qq_33650655/article/details/145634564

7. DeepSeek 助力 Vue 开发：打造丝滑的通知栏（Notification Bar）https://blog.csdn.net/qq_33650655/article/details/145620055

6. DeepSeek 助力 Vue 开发：打造丝滑的返回顶部按钮（Back to Top）https://blog.csdn.net/qq_33650655/article/details/145615550

5. DeepSeek 助力 Vue 开发：打造丝滑的时间线（Timeline ）https://blog.csdn.net/qq_33650655/article/details/145597372

4. DeepSeek 助力 Vue 开发：打造丝滑的折叠面板（Accordion）https://blog.csdn.net/qq_33650655/article/details/145590404

3. DeepSeek 助力 Vue 开发：打造丝滑的标签页（Tabs）https://blog.csdn.net/qq_33650655/article/details/145587999

2. DeepSeek 助力 Vue 开发：打造丝滑的进度条（Progress Bar）https://blog.csdn.net/qq_33650655/article/details/145577034

1. DeepSeek 助力 Vue 开发：打造丝滑的步骤条（Step bar）https://blog.csdn.net/qq_33650655/article/details/145560497

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~，若转载本文，一定注明本文链接。

更多专栏订阅推荐：
html+css+js 绚丽效果
vue
✈️ Electron
⭐️ js
字符串
✍️ 时间对象（Date()）操作

你可能感兴趣的:(#,DeepSeek,前端,vue.js,ecmascript,javascript,DeepSeek)

移动端城市区县二级联动选择功能实现包 good2know
本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
day15｜前端框架学习和算法 universe_01 前端算法笔记
T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的
Deepseek技术深化：驱动大数据时代颠覆性变革的未来引擎荣华富贵8 spring boot 搜索引擎后端缓存 redis
在大数据时代，信息爆炸和数据驱动的决策逐渐重塑各行各业。作为一项前沿技术，Deepseek正在引领新一轮技术革新，颠覆传统数据处理与分析方式。本文将从理论原理、应用场景和前沿代码实践三个层面，深入剖析Deepseek技术如何为大数据时代提供颠覆性变革的解决方案。一、技术背景与核心思想1.1大数据挑战与机遇在数据量呈指数级增长的背景下，传统数据处理方法面临数据存储、计算效率和信息提取精度的诸多挑战。
基于DeepSeek的下一代大型游戏开发革命：架构、核心技术与项目管理实践 Liudef06小白特殊专栏人工智能 AIGC 架构人工智能 deepseek
基于DeepSeek的下一代大型游戏开发革命：架构、核心技术与项目管理实践DeepSeek大模型正重塑游戏开发范式，本文将深入解析如何利用这一革命性技术构建下一代大型游戏，涵盖从架构设计到项目管理的全流程实践。目录DeepSeek游戏引擎核心架构1.1神经符号系统融合架构1.2动态世界生成引擎智能NPC与剧情系统2.1角色人格建模技术2.2动态叙事生成算法大型项目管理体系3.1敏捷-AI混合开发流
用代码生成艺术字：设计个性化海报的秘密
本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准
vue element 封装表单影子信息 vue vue.js javascript 前端
背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进
前端面试每日 3+1 —— 第39天浪子神剑
今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
前端数据库：IndexedDB从基础到高级使用指南
文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.
【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）笙囧同学 java 前端状态模式
核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认
从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战
作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：[email protected]各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是
14.tornado操作之应用Websocket协议实现聊天室功能孤寒者 Tornado框架从入门到实战 websocket tornado 聊天室功能实现 python
目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二
为什么学习Web前端一定要掌握JavaScript？ web前端学习指南
为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
小架构step系列25：错误码秋千码途架构 java
1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有
Java朴实无华按天计划从入门到实战（强化速战版-66天）岫珩 Java 后端 java 开发语言学习 Java 时间安排学习计划
致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战（强化速战版-66天）1.基础（18）1.1JavaSE核心（5天）1.2数据库与SQL（5天）1.3前端基础（8天）2.进阶（17天）2.1JavaWeb核心（5天）2.2Mybatis与Spring全家桶（6天）2.3中间件入门（4天）2.4实践项目（2天）3.高阶（1
《跨域资源共享CORS的深层逻辑与前端实践精要》
不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了
深入了解 Kubernetes（k8s）：从概念到实践
目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代，Kubernetes（简称k8s）已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司，都在广泛采用k8s来管理和部署容器化应用。本文将带
Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录二倍速播放前端 vue.js
1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非
大厂都在用的前端缓存策略，你掌握了吗？ AI架构全栈开发实战笔记前端缓存 ai
大厂都在用的前端缓存策略，你掌握了吗？关键词：前端缓存、HTTP缓存、ServiceWorker、CDN缓存、缓存策略、性能优化、浏览器缓存摘要：本文将深入探讨前端开发中常用的缓存策略，从浏览器缓存到ServiceWorker，从HTTP缓存头到CDN缓存，全面解析大厂都在使用的高效缓存技术。通过生动的比喻和实际代码示例，帮助开发者理解并掌握这些提升Web应用性能的关键技术。背景介绍目的和范围本文
26. 什么是雪碧图，作用和原理了解吗 yqcoder 前端面试-CSS css 前端 html
总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不
12. 什么是事件委托 yqcoder 前端面试-CSS css 面试
总结事件委托（EventDelegation）是JavaScript中一种重要的事件处理机制，它利用了事件冒泡的特性，将事件的处理程序绑定到父元素或祖先元素上，而不是直接绑定到具体的子元素上。什么是事件委托？事件冒泡：在DOM中，事件通常会从触发元素开始，然后逐级向上冒泡到其父元素、祖先元素，直到window对象。核心思想：事件委托的核心思想是利用事件冒泡机制，在父元素上监听事件，而不是在每个子元
H5UI微信小程序前端框架实战指南 ai
本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下
Ubuntu安装LAMP L_h1 测试 ubuntu linux
在安装vim时遇到了一个问题：E:无法获得锁/var/lib/dpkg/lock-frontend-open(11:资源暂时不可用)E:无法获取dpkg前端锁(/var/lib/dpkg/lock-frontend)，是否有其他进程正占用它？解决办法：强制解锁sudorm/var/lib/dpkg/lock-frontendsudorm/var/cache/apt/archives/locksud
震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！ coding随想 JavaScript 前端 javascript html5
一、什么是MutationObserver？如果你是一个前端开发者，一定会遇到这样的场景：页面动态加载内容后，某些操作失效了。比如，你写了一个监听按钮点击的代码，但按钮是通过AJAX动态加载的，你的代码根本无法触发。这个时候，你就需要一个“监控哨兵”——MutationObserver，它能实时监听DOM树的变化，帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入
Coze Studio 架构拆解：AI Agent 开发平台项目结构全分析代码简单说 2025开发必备(限时特惠)架构人工智能 Coze Studio 架构 AI Agent 开发平台全栈 AI 工程化图解架构
CozeStudio架构拆解：AIAgent开发平台项目结构全分析标签：CozeStudio项目架构、领域驱动设计DDD、全栈开发规范、Hertz框架、前后端协作、云原生容器、前端测试、IDL接口设计、微服务解耦、AI开发平台源码分析在最近研究AIAgent开发平台的过程中，我深入分析了刚刚开源的CozeStudio项目。这套系统是国内少有的开源全栈AI工程化项目，代码整洁、架构先进，特别是它基于
关于前端的性能优化
性能优化主要涵盖了以下四个方面：(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)减少网络请求：合并文件、使用CDN、启用缓存。优化资源加载：代码分割、懒加载、图片压缩。提升渲染性能：减少重绘回流、防抖节流、使用WebWorker。监控和迭代：定期使用工具检测性能，持续优化。一、网络层面优化减少HTTP请求合并文件：将多个CSS或JavaScript文件合并成一个，减少请求次数。使用C
时间组件库Day.js那些事前端小白花 javascript 开发语言 ecmascript
一、简介1.什么是Day.jsDay.js是一个轻量级，易于使用的JavaScript日期库，提供了强大的日期和时间处理功能，与Moment.js的API设计相似，但具有更高的性能和更小的体积。Day.js官网https://day.js.org/docs/zh-CN/installation/installation2.优势a.特点轻量级：Dayjs的压缩后大小只有2KB左右，远小于Moment
JavaScript正则表达式去除括号但保留内容与去除括号与内容 Selicens javascript 正则表达式
项目上碰到一个需求，是取多个递增文件的文件名，类似于test(1).txt、test(2).txt，但是不需要括号，只要test1、test2这种格式，最开始想到的办法就是js里的replace替换，先上一个比较笨但是也能实现效果的例子letname="test(1).txt"letdata=name.split('.')[0].replace('(','').replace(')','')con
智慧建筑：科技引领房地产与建筑业的未来 RedPhoenix45
最新接入DeepSeek-V3模型，点击下载最新版本InsCodeAIIDE智慧建筑：科技引领房地产与建筑业的未来随着科技的飞速发展，人工智能（AI）和智能化工具正以前所未有的速度改变着各行各业。在房地产与建筑领域，这种变革尤为显著。从建筑设计到施工管理，再到物业管理，智能化技术正在重塑行业的每一个环节。本文将探讨如何利用先进的智能化工具提升房地产与建筑行业的效率，并介绍一款革命性的开发工具——它
智慧施工：AI技术赋能建筑安全监测新纪元
开发AI智能应用，就下载InsCodeAIIDE，一键接入DeepSeek-R1满血版大模型！智慧施工：AI技术赋能建筑安全监测新纪元在现代建筑行业中，施工安全始终是核心关注点之一。随着科技的飞速发展，人工智能（AI）和大数据分析逐渐成为提升施工安全的重要工具。本文将探讨如何利用智能化软件和大模型API来构建高效的施工安全监测系统，并介绍一款强大的开发工具——InsCodeAIIDE的应用场景及其
linux网卡显示未知未托管,linux有线网络显示设备未托管
NetworkManagerNetworkManager是为了使网络配置尽可能简单而开发的网络管理软件包，如果使用DHCP，NetworkManager会替换默认的路由表、从DHCP服务器获取IP地址并根据情况设置域名服务器，NetworkManager的目标是使网络能够开箱即用。NetworkManager由两部分组成:一个以超级用户运行的守护进程(network-manager)；一个前端管理
Linux的Initrd机制被触发 linux
Linux 的 initrd 技术是一个非常普遍使用的机制，linux2.6 内核的 initrd 的文件格式由原来的文件系统镜像文件转变成了 cpio 格式，变化不仅反映在文件格式上， linux 内核对这两种格式的 initrd 的处理有着截然的不同。本文首先介绍了什么是 initrd 技术，然后分别介绍了 Linux2.4 内核和 2.6 内核的 initrd 的处理流程。最后通过对 Lin
maven本地仓库路径修改 bitcarter maven
默认maven本地仓库路径：C:\Users\Administrator\.m2 修改maven本地仓库路径方法： 1.打开E:\maven\apache-maven-2.2.1\conf\settings.xml 2.找到
XSD和XML中的命名空间 darrenzhu xml xsd schema namespace 命名空间
http://www.360doc.com/content/12/0418/10/9437165_204585479.shtml http://blog.csdn.net/wanghuan203/article/details/9203621 http://blog.csdn.net/wanghuan203/article/details/9204337 http://www.cn
Java 求素数运算周凡杨 java 算法素数
网络上对求素数之解数不胜数，我在此总结归纳一下，同时对一些编码，加以改进，效率有成倍热提高。第一种：原理: 6N(+-)1法任何一个自然数，总可以表示成为如下的形式之一： 6N，6N+1，6N+2，6N+3，6N+4，6N+5 (N=0，1，2，…)
java 单例模式 g21121 java
想必单例模式大家都不会陌生，有如下两种方式来实现单例模式： class Singleton { private static Singleton instance=new Singleton(); private Singleton(){} static Singleton getInstance() { return instance; }
Linux下Mysql源码安装 510888780 mysql
1.假设已经有mysql-5.6.23-linux-glibc2.5-x86_64.tar.gz (1)创建mysql的安装目录及数据库存放目录解压缩下载的源码包，目录结构，特殊指定的目录除外：
32位和64位操作系统墙头上一根草 32位和64位操作系统
32位和64位操作系统是指：CPU一次处理数据的能力是32位还是64位。现在市场上的CPU一般都是64位的，但是这些CPU并不是真正意义上的64 位CPU，里面依然保留了大部分32位的技术，只是进行了部分64位的改进。32位和64位的区别还涉及了内存的寻址方面，32位系统的最大寻址空间是2 的32次方= 4294967296（bit）= 4（GB）左右，而64位系统的最大寻址空间的寻址空间则达到了
我的spring学习笔记10-轻量级_Spring框架 aijuans Spring 3
一、问题提问： → 请简单介绍一下什么是轻量级？轻量级（Leightweight）是相对于一些重量级的容器来说的，比如Spring的核心是一个轻量级的容器，Spring的核心包在文件容量上只有不到1M大小，使用Spring核心包所需要的资源也是很少的，您甚至可以在小型设备中使用Spring。
mongodb 环境搭建及简单CURD antlove Web Install curd NoSQL mongo
一搭建mongodb环境 1. 在mongo官网下载mongodb 2. 在本地创建目录 "D:\Program Files\mongodb-win32-i386-2.6.4\data\db" 3. 运行mongodb服务 [mongod.exe --dbpath "D:\Program Files\mongodb-win32-i386-2.6.4\data\
数据字典和动态视图百合不是茶 oracle 数据字典动态视图系统和对象权限
数据字典（data dictionary）是 Oracle 数据库的一个重要组成部分，这是一组用于记录数据库信息的只读（read-only）表。随着数据库的启动而启动,数据库关闭时数据字典也关闭数据字典中包含数据库中所有方案对象（schema object）的定义(包括表，视图，索引，簇，同义词，序列，过程，函数，包，触发器等等) 数据库为一
多线程编程一般规则 bijian1013 java thread 多线程 java多线程
如果两个工两个以上的线程都修改一个对象，那么把执行修改的方法定义为被同步的，如果对象更新影响到只读方法，那么只读方法也要定义成同步的。不要滥用同步。如果在一个对象内的不同的方法访问的不是同一个数据，就不要将方法设置为synchronized的。
将文件或目录拷贝到另一个Linux系统的命令scp bijian1013 linux unix scp
一.功能说明 scp就是security copy，用于将文件或者目录从一个Linux系统拷贝到另一个Linux系统下。scp传输数据用的是SSH协议，保证了数据传输的安全，其格式如下： scp 远程用户名@IP地址：文件的绝对路径
【持久化框架MyBatis3五】MyBatis3一对多关联查询 bit1129 Mybatis3
以教员和课程为例介绍一对多关联关系，在这里认为一个教员可以叫多门课程，而一门课程只有1个教员教，这种关系在实际中不太常见，通过教员和课程是多对多的关系。示例数据：地址表： CREATE TABLE ADDRESSES ( ADDR_ID INT(11) NOT NULL AUTO_INCREMENT, STREET VAR
cookie状态判断引发的查找问题 bitcarter form cgi
先说一下我们的业务背景： 1.前台将图片和文本通过form表单提交到后台，图片我们都做了base64的编码，并且前台图片进行了压缩 2.form中action是一个cgi服务 3.后台cgi服务同时供PC，H5，APP 4.后台cgi中调用公共的cookie状态判断方法（公共的，大家都用，几年了没有问题）问题：（折腾两天。。。。） 1.PC端cgi服务正常调用，cookie判断没
通过Nginx,Tomcat访问日志(access log)记录请求耗时 ronin47
一、Nginx通过$upstream_response_time $request_time统计请求和后台服务响应时间 nginx.conf使用配置方式： log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_r
java-67- n个骰子的点数。把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 bylijinnan java
public class ProbabilityOfDice { /** * Q67 n个骰子的点数 * 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 * 在以下求解过程中，我们把骰子看作是有序的。 * 例如当n=2时，我们认为（1，2）和（2，1）是两种不同的情况 */ private stati
看别人的博客，觉得心情很好 Cb123456 博客心情
以为写博客，就是总结，就和日记一样吧，同时也在督促自己。今天看了好长时间博客: 职业规划: http://www.iteye.com/blogs/subjects/zhiyeguihua android学习: 1.http://byandby.i
[JWFD开源工作流]尝试用原生代码引擎实现循环反馈拓扑分析 comsci 工作流
我们已经不满足于仅仅跳跃一次，通过对引擎的升级，今天我测试了一下循环反馈模式，大概跑了200圈，引擎报一个溢出错误在一个流程图的结束节点中嵌入一段方程，每次引擎运行到这个节点的时候，通过实时编译器GM模块，计算这个方程，计算结果与预设值进行比较，符合条件则跳跃到开始节点，继续新一轮拓扑分析，直到遇到
JS常用的事件及方法 cwqcwqmax9 js
事件描述 onactivate 当对象设置为活动元素时触发。 onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。 onbeforeactivate 对象要被设置为当前元素前立即触发。 onbeforecut 当选中区从文档中删除之前在源对象触发。 onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即
正则表达式验证日期格式 dashuaifu 正则表达式 IT其它 java其它
正则表达式验证日期格式 function isDate(d){ var v = d.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/i); if(!v) { this.focus(); return false; } } <input value="2000-8-8" onblu
Yii CModel.rules() 方法、validate预定义完整列表、以及说说验证 dcj3sjt126com yii
public array rules () {return} array 要调用 validate() 时应用的有效性规则。返回属性的有效性规则。声明验证规则，应重写此方法。每个规则是数组具有以下结构：array('attribute list', 'validator name', 'on'=>'scenario name', ...validation
UITextAttributeTextColor = deprecated in iOS 7.0 dcj3sjt126com ios
In this lesson we used the key "UITextAttributeTextColor" to change the color of the UINavigationBar appearance to white. This prompts a warning "first deprecated in iOS 7.0." Ins
判断一个数是质数的几种方法 EmmaZhao Math python
质数也叫素数，是只能被1和它本身整除的正整数，最小的质数是2，目前发现的最大的质数是p=2^57885161-1【注1】。判断一个数是质数的最简单的方法如下： def isPrime1(n): for i in range(2, n): if n % i == 0: return False return True 但是在上面的方法中有一些冗余的计算，所以
SpringSecurity工作原理小解读坏我一锅粥 SpringSecurity
SecurityContextPersistenceFilter ConcurrentSessionFilter WebAsyncManagerIntegrationFilter HeaderWriterFilter CsrfFilter LogoutFilter Use
JS实现自适应宽度的Tag切换 ini JavaScript html Web css html5
效果体验：http://hovertree.com/texiao/js/3.htm 该效果使用纯JavaScript代码，实现TAB页切换效果，TAB标签根据内容自适应宽度，点击TAB标签切换内容页。 HTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"
Hbase Rest API : 数据查询 kane_xie REST hbase
hbase（hadoop）是用java编写的，有些语言（例如python）能够对它提供良好的支持，但也有很多语言使用起来并不是那么方便，比如c#只能通过thrift访问。Rest就能很好的解决这个问题。Hbase的org.apache.hadoop.hbase.rest包提供了rest接口，它内嵌了jetty作为servlet容器。启动命令：./bin/hbase rest s
JQuery实现鼠标拖动元素移动位置（源码+注释）明子健 jquery js 源码拖动鼠标
欢迎讨论指正！ print.html代码： <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <title>发票打印</title> &l
Postgresql 连表更新字段语法 update qifeifei PostgreSQL
下面这段sql本来目的是想更新条件下的数据，可是这段sql却更新了整个表的数据。sql如下： UPDATE tops_visa.visa_order SET op_audit_abort_pass_date = now() FROM tops_visa.visa_order as t1 INNER JOIN tops_visa.visa_visitor as t2 ON t1.
将redis,memcache结合使用的方案? tcrct redis cache
公司架构上使用了阿里云的服务，由于阿里的kvstore收费相当高，打算自建，自建后就需要自己维护，所以就有了一个想法，针对kvstore(redis)及ocs(memcache)的特点，想自己开发一个cache层，将需要用到list，set，map等redis方法的继续使用redis来完成，将整条记录放在memcache下，即findbyid，save等时就memcache，其它就对应使用redi
开发中遇到的诡异的bug wudixiaotie bug
今天我们服务器组遇到个问题：我们的服务是从Kafka里面取出数据，然后把offset存储到ssdb中，每个topic和partition都对应ssdb中不同的key，服务启动之后，每次kafka数据更新我们这边收到消息，然后存储之后就发现ssdb的值偶尔是-2,这就奇怪了，最开始我们是在代码中打印存储的日志，发现没什么问题，后来去查看ssdb的日志，才发现里面每次set的时候都会对同一个key

DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_运动计划日历示例（CalendarView01_17）

目录

DeepSeek 助力 Vue3 开发：打造丝滑的日历(Calendar)，日历_运动计划日历示例（CalendarView01_17）

前言

本文简介：

本文页面效果

组件代码

代码测试

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

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

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

本文页面效果

相关文章

你可能感兴趣的:(#,DeepSeek,前端,vue.js,ecmascript,javascript,DeepSeek)