vue tailwindcss 项目模板

创建vue项目，安装tailwindcss,headlessui,vite,axios

在vue中选择使用typescript或者javascript

cd frontend
npm create vue@latest
npm install -D tailwindcss@3.4.17 postcss autoprefixer
npx tailwindcss init
npm install @headlessui/vue @heroicons/vue
npm install axios

编辑tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: '#165DFF',
        success: '#00B42A',
        warning: '#FF7D00',
        danger: '#F53F3F',
        title: '#1D2129',
        text: '#4E5969',
        secondary: '#86909C',
        border: '#E5E6EB',
        background: '#F2F3F5',
      },
      fontFamily: {
        sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

将tailwindcss指令添加到 src/style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family:
      Inter,
      -apple-system,
      BlinkMacSystemFont,
      sans-serif;
    min-width: 320px;
    background-color: #f2f3f5;
    color: #4e5969;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #1d2129;
    line-height: 1.3;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

@layer components {
  /* 主按钮 */
  .btn-primary {
    @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 transition cursor-pointer;
  }

  /* 次要按钮 */
  .btn-secondary {
    @apply border border-gray-300 bg-white px-4 py-2 rounded-md hover:bg-gray-50 transition cursor-pointer;
  }

  /* 成功按钮 */
  .btn-success {
    @apply bg-success text-white px-4 py-2 rounded-md hover:bg-success/90 transition cursor-pointer;
  }

  /* 卡片样式 */
  .card {
    @apply bg-white rounded-lg shadow-sm border border-gray-100 p-4 hover:shadow-md transition;
  }

  /* 输入框样式 */
  .input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50;
  }

  /* 标签样式 */
  .tag {
    @apply inline-block px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-600 mr-2 mb-2;
  }
}

在main.js中引入style.css

import './style.css';

在根目录创建postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

测试，运行npm run dev

You did it!
Visit vuejs.org to read the documentation

运行会有tailwindcss的警告信息

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration. .
warn - https://tailwindcss.com/docs/content-configuration

这是正常的，我们还没有开始使用tailwindcss

初始化App.vue，支持基本的路由

<template>
  <router-view />
</template>
<script setup>
import { useRouter } from 'vue-router'

// 使用router接管路由
const router = useRouter()
// 监听路由变化
router.afterEach((to, from) => {
})
</script>
<style scoped></style>

创建api

创建src/api目录，用于存放api相关的文件
在src/api目录下创建index.js文件，用于导出api相关的文件

export { http } from './http'

创建src/api/http.js文件，用于配置axios拦截

/**
 *  使用axios 统一处理请求和响应
 */

import axios from 'axios';

// 创建 axios 实例

export const http = axios.create({
    timeout: 30000, // 请求超时30S
    headers: {
        'Content-Type': 'application/json',
    },
});

// 请求拦截器
// 请求拦截器
http.interceptors.request.use(
    (config) => {
        // 可以在这里添加 token 等
        //console.log('Request:', config.method?.toUpperCase(), config.url)
        return config
    },
    (error) => {
        console.error('Request Error:', error)
        return Promise.reject(error)
    }
)

// 响应拦截器
http.interceptors.response.use(
    (response) => {
        //console.log('Response:', response.status, response.config.url)
        return response
    },
    (error) => {
        // 处理错误
        if (error.response) {
            // 服务器返回了错误状态码
            //console.error('Response Error:', error.response.status, error.response.data)

            switch (error.response.status) {
                case 404:
                    console.error('请求的资源不存在')
                    break
                case 500:
                    console.error('服务器内部错误')
                    break
                default:
                    console.error('请求失败:', error.response.statusText)
            }
        } else if (error.request) {
            // 请求已发出但没有收到响应（可能是 CORS 问题）
            //console.error('Network Error:', error.message)
            console.error('可能的原因：')
            console.error('1. 后端服务未启动')
            console.error('2. CORS 配置不正确')
            console.error('3. 网络连接问题')
        } else {
            // 其他错误
            console.error('Error:', error.message)
        }

        return Promise.reject(error)
    }
)

export default http

视图组件

创建api/views/目录，用于存放视图相关的文件
创建一个HomeView.vue文件，使用tailwindcss展示首页

<template>
  <div>
    <h1 class="text-3xl font-bold text-center text-gray-800">Home View</h1>
  </div>
</template>
<script setup>
</script>
<style scoped></style>

更新vue路由router/index.js，添加首页路由

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'


const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
})

export default router

通过项目创建新项目

可以Git clone 项目模板，创建新的项目，需要修改项目名称和目录结构
复制frontend目录，重命名为新的项目名称，例如new-project
修改new-project目录下的package.json文件，修改项目名称为新的项目名称

{
  "name": "new-project",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "engines": {
    "node": "^20.19.0 || >=22.12.0"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint:oxlint": "oxlint . --fix -D correctness --ignore-path .gitignore",
    "lint:eslint": "eslint . --fix --cache",
    "lint": "run-s lint:*",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "@headlessui/vue": "^1.7.23",
    "@heroicons/vue": "^2.2.0",
    "axios": "^1.13.2",
    "pinia": "^3.0.3",
    "vue": "^3.5.22",
    "vue-router": "^4.6.3"
  },
  "devDependencies": {
    "@eslint/js": "^9.37.0",
    "@prettier/plugin-oxc": "^0.0.4",
    "@vitejs/plugin-vue": "^6.0.1",
    "@vue/eslint-config-prettier": "^10.2.0",
    "autoprefixer": "^10.4.22",
    "eslint": "^9.37.0",
    "eslint-plugin-oxlint": "~1.23.0",
    "eslint-plugin-vue": "~10.5.0",
    "globals": "^16.4.0",
    "npm-run-all2": "^8.0.4",
    "oxlint": "~1.23.0",
    "postcss": "^8.5.6",
    "prettier": "3.6.2",
    "tailwindcss": "^3.4.17",
    "vite": "^7.1.11",
    "vite-plugin-vue-devtools": "^8.0.3"
  }
}

通过npm install安装项目依赖，然后通过npm run dev启动项目

添加简单的seo

1. 基础 Meta 标签

  • ✅ <title> - 优化的页面标题，包含主要关键词
  • ✅ <meta name="description"> - 详细的页面描述
  • ✅ <meta name="keywords"> - 相关关键词列表
  • ✅ <meta name="author"> - 作者信息
  • ✅ <meta name="robots"> - 搜索引擎索引指令
  • ✅ <meta name="language"> - 页面语言
  • ✅ <meta name="revisit-after"> - 建议搜索引擎重访频率

2. Open Graph (Facebook/社交媒体)

  • ✅ og:type - 网站类型
  • ✅ og:url - 页面 URL
  • ✅ og:title - 社交分享标题
  • ✅ og:description - 社交分享描述
  • ✅ og:image - 社交分享图片
  • ✅ og:site_name - 网站名称
  • ✅ og:locale - 地区语言

3. Twitter Card

  • ✅ twitter:card - 卡片类型
  • ✅ twitter:url - 页面 URL
  • ✅ twitter:title - Twitter 分享标题
  • ✅ twitter:description - Twitter 分享描述
  • ✅ twitter:image - Twitter 分享图片

4. 移动端优化

  • ✅ theme-color - 浏览器主题色
  • ✅ apple-mobile-web-app-capable - iOS Web App 支持
  • ✅ apple-mobile-web-app-status-bar-style - iOS 状态栏样式
  • ✅ apple-mobile-web-app-title - iOS 应用标题
  • ✅ format-detection - 禁用自动电话号码检测

🔗 链接优化

1. Canonical URL

<link rel="canonical" href="https://biz.kningyuan.top/">

防止重复内容问题

2. 多语言支持

<link rel="alternate" hreflang="zh-CN" href="https://biz.kningyuan.top/">
<link rel="alternate" hreflang="x-default" href="https://biz.kningyuan.top/">

📊 结构化数据 (Schema.org)

已添加 JSON-LD 格式的结构化数据：

{
  "@type": "WebApplication",
  "name": "我的壁纸",
  "description": "...",
  "applicationCategory": "MultimediaApplication",
  "offers": { "price": "0" },
  "author": { "name": "WenYan" },
  "aggregateRating": { "ratingValue": "4.8" },
  "featureList": [...]
}

好处：

  • 🎯 在搜索结果中显示丰富片段
  • ⭐ 显示评分和价格
  • 📋 展示功能列表
  • 👤 显示作者信息

📄 站点文件

1. robots.txt

位置：/public/robots.txt

User-agent: *
Allow: /
Sitemap: https://biz.kningyuan.top/sitemap.xml

作用：

  • 告诉搜索引擎可以抓取所有页面
  • 指向 sitemap 位置

2. sitemap.xml

位置：/public/sitemap.xml

包含的页面：

  • 首页 (priority: 1.0)
  • 关于页面 (priority: 0.8)
  • 隐私政策 (priority: 0.7)

作用：

  • 帮助搜索引擎发现所有页面
  • 指定页面优先级和更新频率

3. manifest.json

位置：/public/manifest.json
作用：

  • PWA 支持
  • 可安装到桌面
  • 离线访问能力
  • 提升用户体验