好的！以下是你提出主题中涉及的多个 UI 组件库（Vue 和 React）前端实战代码示例合集，可直接用于入门练习或集成到项目中，涵盖了 PC 端和移动端的代表性库。

✅ 一、Vue 生态：组件库实战代码

1. 使用 Element Plus 实现表单 + 弹窗（PC 端）

安装：

npm install element-plus

完整代码（Vue 3 + <script setup>）：

<template>
  <el-form :model="form" label-width="80px">
    <el-form-item label="用户名">
      <el-input v-model="form.username" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="form.password" />
    </el-form-item>
    <el-button type="primary" @click="dialogVisible = true">提交</el-button>
  </el-form>

  <el-dialog v-model="dialogVisible" title="提示">
    <span>您输入的用户名是：{{ form.username }}</span>
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
const form = ref({ username: '', password: '' })
const dialogVisible = ref(false)
</script>

2. 使用 Vant 搭建移动端登录页（移动端）

安装：

npm install vant

<template>
  <van-form @submit="onSubmit">
    <van-field v-model="username" label="账号" placeholder="请输入账号" />
    <van-field v-model="password" type="password" label="密码" placeholder="请输入密码" />
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">登录</van-button>
    </div>
  </van-form>
</template>

<script setup>
import { ref } from 'vue'
import 'vant/lib/index.css'
const username = ref('')
const password = ref('')
const onSubmit = () => {
  alert(`登录账号：${username.value}`)
}
</script>

3. 使用 Naive UI 实现卡片列表组件（PC）

安装：

npm install naive-ui

<template>
  <n-space vertical>
    <n-card title="公告" size="medium">
      <p>欢迎使用 Naive UI</p>
    </n-card>
    <n-card title="通知" size="medium">
      <p>系统将在今晚 0:00 进行维护</p>
    </n-card>
  </n-space>
</template>

<script setup>
import { NCard, NSpace } from 'naive-ui'
</script>

✅ 二、React 生态：组件库实战代码

1. 使用 Ant Design 构建注册表单（PC）

安装：

npm install antd

import { Form, Input, Button, message } from 'antd';
import 'antd/dist/reset.css';

export default function RegisterForm() {
  const onFinish = (values) => {
    message.success(`注册成功，欢迎你：${values.username}`);
  };

  return (
    <Form onFinish={onFinish} labelCol={{ span: 4 }} wrapperCol={{ span: 14 }}>
      <Form.Item label="用户名" name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item label="密码" name="password" rules={[{ required: true }]}>
        <Input.Password />
      </Form.Item>
      <Form.Item wrapperCol={{ offset: 4 }}>
        <Button type="primary" htmlType="submit">注册</Button>
      </Form.Item>
    </Form>
  );
}

2. 使用 Material UI 构建按钮与对话框（PC + 响应式）

安装：

npm install @mui/material @emotion/react @emotion/styled

import React, { useState } from 'react';
import { Button, Dialog, DialogTitle, DialogContent } from '@mui/material';

export default function AlertDialog() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="contained" onClick={() => setOpen(true)}>打开提示</Button>
      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogTitle>提示</DialogTitle>
        <DialogContent>这是一个 Material UI 对话框</DialogContent>
      </Dialog>
    </>
  );
}

3. 使用 Chakra UI 实现响应式卡片组件（支持移动端）

安装：

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

import { ChakraProvider, Box, Text, Button } from '@chakra-ui/react';

export default function App() {
  return (
    <ChakraProvider>
      <Box p={5} shadow="md" borderWidth="1px" borderRadius="md">
        <Text fontSize="xl">欢迎使用 Chakra UI</Text>
        <Button mt={4} colorScheme="teal">点我</Button>
      </Box>
    </ChakraProvider>
  );
}

📦 附加：快速项目初始化模板推荐

  • Vue 项目：npm init vue@latest
  • React 项目：npx create-react-app my-app
  • Vite + Vue 3 + UI 库（推荐）：npm create vite@latest my-vue-app --template vue
  • Vite + React + UI 库（推荐）：npm create vite@latest my-react-app --template react

如果你需要我为你打包一个包含多个组件库示例的可运行项目模板（Vue or React + Vite + UI组件），也可以告诉我，我可以生成完整项目结构给你下载。是否需要继续？