本文实现效果如下：

创建一个vue应用

按照Vue.js官网，在已经安装nodejs（最好使用nvm安装LTS长期支持版本）的基础上，执行以下命令可以快速创建

npm create vue@latest

cd <your-project-name>

npm install

npm run dev

如何在vue中使用Dayjs插件

dayjs相比momentjs更轻量级，因此项目经常使用Day.js来格式化时间

使用npm安装

npm install dayjs

在Ts项目中导入并使用

import dayjs from "dayjs";
dayjs().format()

在导入dayjs可能会遇到无法识别该模块的error，可以按照以下方式处理

ctrl+shift+p打开vscode控制面板
选择扩展：展示内置的扩展

在@builtin后面输入typescript
点击JavaScript 和 TypeScript 的语言功能的设置按钮，改为禁用（工作区）

如何在vue中使用scss

使用npm安装sass、sass-loader

npm i sass sass-loader --save-dev

全局使用scss

在vite.config.ts文件中配置全局scss，@代表根目录，还需要在/assets/style下新建mixin.scss文件

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  css: {
    //css预处理器
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/style/mixin.scss";',
      },
    },
  },
});

单个vue文件使用scss

<style scoped lang="scss"></style>

Ref和Reactive哪个更适用

ref接收原始数据类型和对象，reactive只能接收对象类型，两者都是响应式作用于模板，reactive的好处是可以将整个状态放在一个变量里。根据代码规范，ref适用于简单数据类型，reactive适用于复杂类型，这样代码更加直观。

[数字大屏]时间组件-Vue-TS