在使用 Vue.js 结合 dayjs、lunar-javascript 库，可以通过以下步骤来实现：

1. 安装 dayjs 和中文包

首先，确保你已经安装了 dayjs。如果还没有安装，可以通过 npm 或 yarn 来安装：

npm install dayjs

 2.安装 chinese-lunar-calendar 插件

 npm install --save chinese-lunar-calendar

 3.封装获取阴历函数

import {getLunar} from 'chinese-lunar-calendar'
 
export function lunarDate(pDate){
    const year = pDate.getFullYear()
    const month = pDate.getMonth() +1
    const day = pDate.getDate()
    const result = getLunar(year,month,day)
    return result.dateStr
}

4.调用方法

const date = new Date()
const result = lunarDate(date)//十月廿十

用例一

<template>
    <div class="dates">
        <div class="times">
            {
   
   { time.time }}
        </div>
        <div class="weeks">{
   
   { time.week }}{
   
   { time.date }}{
   
   { date.lunarYear }}{
   
   { date.zodiac }}{
   
   { date.dateStr }}</div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'; // 引入中文语言包
import { getLunar } from 'chinese-lunar-calendar'

const timer = ref()
const time = ref({})
const date = ref({})
onMounted(() => {
    timer.value = window.setInterval(() => {
        time.value = generateTime()
    })
    const result = lunarDate(new Date())//十月廿十
    date.value = result
    console.log(`当前年份和生肖是：${result}`)
})
onBeforeUnmount(() => {
    timer.value && clearInterval(timer.value)
})
/**
 * 生成时间
 * @returns {Object} 时间对象
 */
function generateTime() {
    const time = dayjs().format('HH:mm:ss')
    const week = dayjs().locale('zh-cn').format('dddd')
    const date = dayjs().format('YYYY.MM.DD')

    return {
        time,
        week,
        date
    }
}
/**
 * 农历日期
 * @param {Date} pDate 日期
 * @returns {String} 农历日期
 */
function lunarDate(pDate){
    const year = pDate.getFullYear()
    const month = pDate.getMonth() +1
    const day = pDate.getDate()
    const result = getLunar(year,month,day)
    return result
}

</script>

<style scoped lang="scss">
.dates {
    width: 120px;
    padding: 0px 5px 0px 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: start;
    .times {
        display: flex;
        justify-content: start;
        font-size: 18px;
        font-family: 'Agency FB, Agency FB-Bold';
        color: #fff;
        line-height: 24px;
    }
    .weeks {
        line-height: 18px;
        display: flex;
        justify-content: start;
        font-family: 'Agency FB, Agency FB-Bold';
        overflow: hidden;
        font-size: 14px;
        color: #fff;
    }
}
</style>

 

用例二

<template>
  <div class="fix-box">
    <!-- 日历卡片 页面 -->
    <div class="calendar-card">
      <div class="cal-top">{
   
   { curYear }} 年 {
   
   { curMonth }} 月</div>
      <div class="cal-center">{
   
   { curDay }}</div>
      <div class="cal-footer">
        <p class="cal-footer-d">第 {
   
   { dayOfYear }} 天 第 {
   
   { weekOfYear }} 周</p>
        <p class="cal-footer-w">{
   
   { lunarDay }} {
   
   { curWeek }}</p>
      </div>
    </div>
    <p class="label d-elip">日历</p>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { getLunar } from "chinese-lunar-calendar";
 
const curYear = ref(""); // 当前年份
const curMonth = ref(""); // 当前月份
const curDay = ref(""); // 当前日期
const curWeek = ref(""); // 当前周
const lunarDay = ref(""); // 农历日期
const dayOfYear = ref(""); // 当前日期是一年中的第几天
const weekOfYear = ref(""); // 当前日期是一年的第几周
 
onMounted(() => {
  // 初始化日历
  const date = new Date();
  curYear.value = date.getFullYear();
  curMonth.value = date.getMonth() + 1;
  curDay.value = date.getDate();
 
  const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
  const day = date.getDay();
  curWeek.value = weekday[day];
 
  const lunarDate = getLunar(curYear.value, curMonth.value, curDay.value);
  lunarDay.value = lunarDate.dateStr;
  // 获取当前时间是当年的第几天
  dayOfYear.value = Math.floor((date - new Date(curYear.value, 0, 0)) / 86400000);
  // 获取当前时间是当年的第几周
  const start = new Date(curYear.value, 0, 1);
  weekOfYear.value = Math.ceil((((date - start) / 86400000) + start.getDay() + 1) / 7);
});
</script>
 
<style scoped lang="less">
.fix-box {
  position: relative;
 
  .calendar-card {
    //   width: 100%;
    //   height: 100%;
    width: 186px;
    height: 186px;
    font-family: PingFang SC, -apple-system, BlinkMacSystemFont, Helvetica Neue,
      Helvetica, sans-serif;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease;
 
    &:hover {
      transform: translateY(-3px);
    }
 
    .cal-top {
      font-size: 16px;
      color: #fff;
      line-height: 46px;
      height: 25%;
      background: rgba(239, 102, 99, 0.8);
    }
    .cal-center {
      font-size: 46px;
      font-weight: 600;
      line-height: 78px;
      height: 42%;
    }
    .cal-footer {
      height: 33%;
 
      .cal-footer-d {
        font-size: 14px;
        color: #999;
      }
      .cal-footer-w {
        font-size: 16px;
      }
    }
  }
  .label {
    position: absolute;
    bottom: -28px;
    left: 0;
    width: 100%;
    font-size: 14px;
    color: #fff;
  }
  .d-elip {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
</style>