本项目是对 Brad Traversy 的经典挑战项目 50 Projects in 50 Days 的 Vue3 + Tailwind CSS 重构版。
💡 原项目使用的是原生 HTML/CSS/JS，本项目将其重构为 现代化的 Vue3 应用，配合 TailwindCSS 实现更高效的 UI 构建，为你日后的组件设计提供灵感源头。
50-vue-projects/
├── public/ # 静态资源
├── src/
│ ├── assets/ # 图片、图标等资源
│ ├── components/ # 公共组件
│ ├── projects/ # 每个项目一个独立目录
│ ├── router/ # 路由配置
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── vite.config.js # 构建配置
└── README.md- 💚 Vue 3 + Composition API
- 💨 Tailwind CSS
- ⚡ Vite 作为构建工具
- 🧩 按需拆分每个练习为一个 Vue 路由模块
git clone https://github.com/SunACong/50-vue-projects.git
cd 50-vue-projectspnpm install # 或 yarn / npm installpnpm dev # 启动开发服务器pnpm build| 编号 | 项目名称 | 状态 | 路由地址 |
|---|---|---|---|
| 1 | Expanding Cards | ✅ 已完成 | /projects/ExpandingCards |
| 2 | Progress Steps | ✅ 已完成 | /projects/ProgressSteps |
| 3 | Hidden Search Widget | ✅ 已完成 | /projects/HiddenSearchWidget |
| 4 | Rotating Navigation Animation | ✅ 已完成 | /projects/RotatingNavigationAnimation |
| 5 | Blurry Loading | ✅ 已完成 | /projects/BlurryLoading |
| 6 | Scroll Animation | ✅ 已完成 | /projects/ScrollAnimation |
| 7 | Split Landing Page | ✅ 已完成 | /projects/SplitLandingPage |
| 8 | Form Wave | ✅ 已完成 | /projects/FormWave |
| 9 | Sound Board | ✅ 已完成 | /projects/SoundBoard |
| 10 | Dad Jokes | ✅ 已完成 | /projects/DadJokes |
| 11 | Event Keycodes | ✅ 已完成 | /projects/EventKeycodes |
| 12 | FAQ Collapse | ✅ 已完成 | /projects/FAQCollapse |
| 13 | Random Choice Picker | ✅ 已完成 | /projects/RandomChoicePicker |
| 14 | Animated Navigation | ✅ 已完成 | /projects/AnimatedNavigation |
| 15 | Incrementing Counter | ✅ 已完成 | /projects/IncrementingCounter |
| 16 | Drink Water | ✅ 已完成 | /projects/DrinkWater |
| 17 | Movie App | ✅ 已完成 | /projects/MovieApp |
| 18 | Background Slider | ✅ 已完成 | /projects/BackgroundSlider |
| 19 | Theme Clock | ✅ 已完成 | /projects/ThemeClock |
| 20 | Button Ripple Effect | ✅ 已完成 | /projects/ButtonRippleEffect |
| 21 | Drag N Drop | ✅ 已完成 | /projects/DragNDrop |
| 22 | Drawing App | ✅ 已完成 | /projects/DrawingApp |
| 23 | Kinetic Loader | ✅ 已完成 | /projects/KineticLoader |
| 24 | Content Placeholder | ✅ 已完成 | /projects/ContentPlaceholder |
| 25 | Sticky Navbar | ✅ 已完成 | /projects/StickyNavbar |
| 26 | Double Vertical Slider | ✅ 已完成 | /projects/DoubleVerticalSlider |
| 27 | Toast Notification | ✅ 已完成 | /projects/ToastNotification |
| 28 | Github Profiles | ✅ 已完成 | /projects/GithubProfiles |
| 29 | Double Click Heart | ✅ 已完成 | /projects/DoubleClickHeart |
| 30 | Auto Text Effect | ✅ 已完成 | /projects/AutoTextEffect |
| 31 | Password Generator | ✅ 已完成 | /projects/PasswordGenerator |
| 32 | Good Cheap Fast | ✅ 已完成 | /projects/GoodCheapFast |
| 33 | Notes App | ✅ 已完成 | /projects/NotesApp |
| 34 | Animated Countdown | ✅ 已完成 | /projects/AnimatedCountdown |
| 35 | Image Carousel | ✅ 已完成 | /projects/ImageCarousel |
| 36 | Hoverboard | ✅ 已完成 | /projects/Hoverboard |
| 37 | Pokedex | ✅ 已完成 | /projects/Pokedex |
| 38 | MobileTabNavigation | ✅ 已完成 | /projects/MobileTabNavigation |
| 39 | PasswordStrengthBackground | ✅ 已完成 | /projects/PasswordStrengthBackground |
| 40 | 3dBackgroundBoxes | ✅ 已完成 | /projects/3dBackgroundBoxes |
| 41 | VerifyAccountUi | ✅ 已完成 | /projects/VerifyAccountUi |
| 42 | LiveUserFilter | ✅ 已完成 | /projects/LiveUserFilter |
| 43 | Feedback Ui Design | ✅ 已完成 | /projects/FeedbackUiDesign |
| 44 | RangeSlider | ✅ 已完成 | /projects/RangeSlider |
| 45 | NetflixMobileNavigation | ✅ 已完成 | /projects/NetflixMobileNavigation |
| 46 | QuizApp | ✅ 已完成 | /projects/QuizApp |
| 47 | TestimonialBoxSwitcher | ✅ 已完成 | /projects/TestimonialBoxSwitcher |
| 48 | RandomImageGenerator | ✅ 已完成 | /projects/RandomImageGenerator |
| 49 | TodoList | ✅ 已完成 | /projects/TodoList |
| 50 | InsectCatchGame | ✅ 已完成 | /projects/InsectCatchGame |
🧱 每个项目都将作为独立页面进行展示，可在首页查看项目列表跳转。
如果你也想参与重构或提交优化：
- Fork 本项目
- 提交你的改动（建议一个项目一个 PR）3. 发起 Pull Request，我们一起让这个项目更好！
MIT License
- 原作者：Brad Traversy