当前位置：首页 > news >正文

50天50个小项目 (Vue3 + Tailwindcss V4) ✨ ｜搭建项目框架

news 来源：原创 2025/5/15 6:33:13

🖤 一个专注于「Vue3 + TailwindCSS」的 50 天极简开发挑战，探索组件边界，打磨技术锋芒。

🎉 欢迎来到 50 个小项目的第一天！今天我们将从零开始搭建一个 Vue3 项目，并引入 Tailwind CSS v4，为后续项目做好技术准备。

💻 技术点

组合式API：使用Vue3的Composition API进行状态管理
Tailwind CSS：采用实用优先的CSS框架，提高开发效率
响应式设计：适配不同屏幕尺寸的布局
路由管理：使用Vue Router实现SPA导航
模块化组织：清晰的项目结构和组件分层

📂项目结构

50days50projects/
├── public/              # 静态资源目录
├── src/                 # 源代码目录
│   ├── assets/          # 项目资源文件
│   ├── components/      # 通用组件
│   ├── constants/       # 常量定义
│   ├── projects/        # 50个项目组件
│   ├── router/          # 路由配置
│   ├── sections/        # 页面区块组件
│   ├── App.vue          # 根组件
│   ├── main.js          # 入口文件
│   └── style.css        # 全局样式
├── index.html           # HTML 模板
├── package.json         # 项目依赖
└── vite.config.js       # Vite 配置

📦 项目搭建

1. Vite 创建 vue 项目：

pnpm create vite 50-vue-projects --template vue
cd 50-vue-projects
pnpm install
pnpm dev

访问 http://localhost:5173 🎉

2. 集成 `Tailwindcss v4`

npm install -D tailwindcss@4 @tailwindcss/vite

配置vite.config.js

import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'export default defineConfig({plugins: [vue(), tailwindcss()],resolve: {alias: {'@': '/src',},},
})

编辑style.css（Tailwind CSS v4 主题化实践入门（自定义 Theme + 主题模式切换）✨）

@import 'tailwindcss';@custom-variant dark (&:is(.dark *));@theme inline {--font-sans:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji','Segoe UI Symbol', 'Noto Color Emoji';--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',monospace;--color-background: var(--background);--color-foreground: var(--foreground);--color-card: var(--card);--color-card-foreground: var(--card-foreground);--color-popover: var(--popover);--color-popover-foreground: var(--popover-foreground);--color-primary: var(--primary);--color-primary-foreground: var(--primary-foreground);--color-secondary: var(--secondary);--color-secondary-foreground: var(--secondary-foreground);--color-muted: var(--muted);--color-muted-foreground: var(--muted-foreground);--color-accent: var(--accent);--color-accent-foreground: var(--accent-foreground);--color-destructive: var(--destructive);--color-destructive-foreground: var(--destructive-foreground);--color-border: var(--border);--color-input: var(--input);--color-ring: var(--ring);--color-chart-1: var(--chart-1);--color-chart-2: var(--chart-2);--color-chart-3: var(--chart-3);--color-chart-4: var(--chart-4);--color-chart-5: var(--chart-5);--radius-sm: calc(var(--radius) - 4px);--radius-md: calc(var(--radius) - 2px);--radius-lg: var(--radius);--radius-xl: calc(var(--radius) + 4px);--color-sidebar: var(--sidebar);--color-sidebar-foreground: var(--sidebar-foreground);--color-sidebar-primary: var(--sidebar-primary);--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);--color-sidebar-accent: var(--sidebar-accent);--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);--color-sidebar-border: var(--sidebar-border);--color-sidebar-ring: var(--sidebar-ring);
}:root {--background: oklch(1 0 0);--foreground: oklch(0.145 0 0);--card: oklch(1 0 0);--card-foreground: oklch(0.145 0 0);--popover: oklch(1 0 0);--popover-foreground: oklch(0.145 0 0);--primary: oklch(0.205 0 0);--primary-foreground: oklch(0.985 0 0);--secondary: oklch(0.97 0 0);--secondary-foreground: oklch(0.205 0 0);--muted: oklch(0.97 0 0);--muted-foreground: oklch(0.556 0 0);--accent: oklch(0.97 0 0);--accent-foreground: oklch(0.205 0 0);--destructive: oklch(0.577 0.245 27.325);--destructive-foreground: oklch(0.577 0.245 27.325);--border: oklch(0.922 0 0);--input: oklch(0.922 0 0);--ring: oklch(0.708 0 0);--chart-1: oklch(0.646 0.222 41.116);--chart-2: oklch(0.6 0.118 184.704);--chart-3: oklch(0.398 0.07 227.392);--chart-4: oklch(0.828 0.189 84.429);--chart-5: oklch(0.769 0.188 70.08);--radius: 0.625rem;--sidebar: oklch(0.985 0 0);--sidebar-foreground: oklch(0.145 0 0);--sidebar-primary: oklch(0.205 0 0);--sidebar-primary-foreground: oklch(0.985 0 0);--sidebar-accent: oklch(0.97 0 0);--sidebar-accent-foreground: oklch(0.205 0 0);--sidebar-border: oklch(0.922 0 0);--sidebar-ring: oklch(0.708 0 0);
}.dark {--background: oklch(0.145 0 0);--foreground: oklch(0.985 0 0);--card: oklch(0.145 0 0);--card-foreground: oklch(0.985 0 0);--popover: oklch(0.145 0 0);--popover-foreground: oklch(0.985 0 0);--primary: oklch(0.985 0 0);--primary-foreground: oklch(0.205 0 0);--secondary: oklch(0.269 0 0);--secondary-foreground: oklch(0.985 0 0);--muted: oklch(0.269 0 0);--muted-foreground: oklch(0.708 0 0);--accent: oklch(0.269 0 0);--accent-foreground: oklch(0.985 0 0);--destructive: oklch(0.396 0.141 25.723);--destructive-foreground: oklch(0.637 0.237 25.331);--border: oklch(0.269 0 0);--input: oklch(0.269 0 0);--ring: oklch(0.439 0 0);--chart-1: oklch(0.488 0.243 264.376);--chart-2: oklch(0.696 0.17 162.48);--chart-3: oklch(0.769 0.188 70.08);--chart-4: oklch(0.627 0.265 303.9);--chart-5: oklch(0.645 0.246 16.439);--sidebar: oklch(0.205 0 0);--sidebar-foreground: oklch(0.985 0 0);--sidebar-primary: oklch(0.488 0.243 264.376);--sidebar-primary-foreground: oklch(0.985 0 0);--sidebar-accent: oklch(0.269 0 0);--sidebar-accent-foreground: oklch(0.985 0 0);--sidebar-border: oklch(0.269 0 0);--sidebar-ring: oklch(0.439 0 0);
}@layer base {body {@apply bg-black;}
}@layer utilities {.c-space {@apply px-5 sm:px-10;}.head-text {@apply bg-gradient-to-r from-[#BEC1CF] from-60% via-[#D5D8EA] via-60% to-[#D5D8EA] to-100% bg-clip-text text-3xl font-semibold text-transparent sm:text-4xl;}.btn {@apply mx-auto flex cursor-pointer items-center justify-center gap-4 rounded-md bg-black p-3 text-white transition-all active:scale-95;}.btn-ping_dot {@apply relative inline-flex h-3 w-3 rounded-full bg-green-500;}
}

验证是否成功 App.vue

<template><div class="min-h-screen bg-gray-900 text-white flex items-center justify-center"><h1 class="text-3xl font-bold text-purple-400">✅ Tailwind v4 + Vue3 已集成成功！</h1></div>
</template>

3. 集成 `vue router`

npm install vue-router@4

src下新增router/index.js

import { createWebHistory, createRouter } from 'vue-router'const routes = []const router = createRouter({history: createWebHistory(),routes,
})export default router

4. 集成`prettier` (可选)

pnpm install -D prettier prettier-plugin-tailwindcss

根目录新增.prettierrc

{"printWidth": 100,"tabWidth": 4,"useTabs": false,"semi": false,"singleQuote": true,"quoteProps": "as-needed","jsxSingleQuote": false,"trailingComma": "es5","bracketSpacing": true,"bracketSameLine": true,"arrowParens": "always","htmlWhitespaceSensitivity": "ignore", "vueIndentScriptAndStyle": true,"endOfLine": "lf","embeddedLanguageFormatting": "auto","plugins": ["prettier-plugin-tailwindcss"]  
}