用vue3+vite重构小项目

2.0.0

项目说明

该项目为web单页面应用，核心功能为显示时间。

技术栈使用 pnpm、Vite、Vue3、typescript、tailwind、github/api

功能需求

• 显示时间
• 显示随机壁纸
• 每日热词录入

非功能需求

• 移动端自适应
• 查看日前时间详细属性

页面对比

新项目预览
旧项目预览

旧页面

新页面

开发记录

Vscode Extension

• Vue 3 Pack
• Vue Extension Pack
• Tailwind CSS Extension Pack

alias设置

'@'默认生效、其他路径需要同时配置vite和typescript才生效，配置完最好重启ide

1.配置vite.config文件

{
resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '#': path.resolve(__dirname, './src/views'),
      '$': path.resolve(__dirname, './src/components'),
    },
  }
}

2.配置tsconfig.json文件

{
 "compilerOptions": {
    "paths": {
      "/@/*": ["src/*"],
      "/#/*": ["src/views/*"],
      "/$/*": ["src/components/*"]
    }
  },
}

script setup