个人简介应用

使用了 Vite、TypeScript、Vue3 Composition API 、setup 语法糖 、Tailwind CSS 的个人简介应用示例。这个应用将展示一个简单的个人简介页面，包括个人信息、技能和项目等。

1. 创建 Vite 项目

首先，确保你已经安装了 Node.js 和 npm。

然后在终端中运行以下命令创建一个新的 Vite 项目：

npm create vite@latest my-profile-app -- --template vue-ts

进入项目，安装依赖：

npm install

2. 安装 Tailwind CSS

在项目中安装 Tailwind CSS 并生成 Tailwind CSS 的配置文件：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

在 tailwind.config.js 中配置 Tailwind：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

新建 src/styles/tailwind.css 文件，引入 Tailwind 的基础样式：

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

4. 创建 Vue 组件

创建组件 src/components/Profile.vue

<template>
  <div class="max-w-4xl mx-auto p-4">
    <div class="bg-white shadow-md rounded-lg overflow-hidden">
      <div class="p-6">
        <div class="flex items-center mb-2">
          <img
            class="w-24 h-24 rounded-full mr-6"
            src="/src/assets/me.png"
            alt="Profile Picture"
          />
          <h1 class="text-3xl font-bold mb-4">{{ profile.name }}</h1>
        </div>
        <p class="text-lg mb-4">{{ profile.bio }}</p>

        <h2 class="text-2xl font-semibold mb-2">技能</h2>
        <ul class="list-disc list-inside mb-4">
          <li v-for="skill in profile.skills" :key="skill">{{ skill }}</li>
        </ul>
        <h2 class="text-2xl font-semibold mb-2">项目</h2>
        <ul class="list-disc list-inside">
          <li v-for="project in profile.projects" :key="project.name">
            <strong>{{ project.name }}:</strong> {{ project.description }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

const profile = reactive({
  name: 'mqxu',
  bio: 'Web 全栈开发者',
  skills: ['JavaScript', 'TypeScript', 'Vue 3', 'Tailwind CSS'],
  projects: [
    {
      name: '智慧社区',
      description:
        '智慧社区项目旨在利用现代科技提升社区的管理效率和居民的生活质量',
    },
    {
      name: '智慧校园',
      description:
        '智慧校园项目旨在通过现代信息技术和智能设备，提升校园的管理效率、教学质量和学生的学习体验',
    },
  ],
})
</script>

5. 配置 App.vue

在 src/App.vue 中，使用组件：

<template>
  <div class="min-h-screen bg-gray-100">
    <Profile />
  </div>
</template>

<script lang="ts" setup>
import Profile from './components/Profile.vue'
</script>

6. 配置 main.ts

在 src/main.ts 中引入 Tailwind CSS 和 App 组件：

import { createApp } from 'vue'
import App from './App.vue'
import './styles/tailwind.css'

createApp(App).mount('#app')

7. 运行应用

最后运行命令启动应用：

npm run dev

访问 http://localhost:5173 将看到一个个人简介页面，展示个人信息、技能和项目。