用vue3+vite重构小项目

image2.0.0

项目说明

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

技术栈使用 pnpmViteVue3typescripttailwindgithub/api

功能需求

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

非功能需求

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

页面对比

新项目预览
旧项目预览

旧页面
用vue3+vite重构小项目_第1张图片
新页面
用vue3+vite重构小项目_第2张图片

开发记录

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


                    
                    

你可能感兴趣的:(用vue3+vite重构小项目)