Vue实用组件与工具使用指南

<template>
  <el-form :model="form" :rules="rules" ref="formRef" label-width="80px" class="form-container">
    <!-- 用户名输入项 -->
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username" placeholder="请输入用户名" clearable></el-input>
    </el-form-item>
    <!-- 密码输入项 -->
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password></el-input>
    </el-form-item>
    <!-- 提交按钮 -->
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm" style="margin-left: 10px;">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus'; // 引入消息提示组件
// 表单实例引用（用于调用校验方法）
const formRef = ref(null);
// 表单数据模型
const form = ref({ username: '', password: '' });
// 表单校验规则
const rules = ref({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ]
});
// 提交表单
const submitForm = async () => {
  try {
    // 触发表单校验，校验通过才执行后续逻辑
    await formRef.value.validate();
    // 校验通过：提交数据到后端（此处替换为真实接口请求）
    ElMessage.success('提交成功！');
  } catch (error) {
    // 校验失败：提示错误信息
    ElMessage.error('表单校验失败，请检查输入！');
    return;
  }
};
// 重置表单
const resetForm = () => {
  formRef.value.resetFields(); // 重置表单字段
};
</script>

<template>
  <el-table :data="tableData" border stripe style="width: 100%">
    <el-table-column label="ID" prop="id" sortable align="center" width="80"></el-table-column>
    <el-table-column label="姓名" prop="name" align="center"></el-table-column>
    <el-table-column label="年龄" prop="age" sortable align="center" width="80"></el-table-column>
    <el-table-column label="性别" prop="gender" align="center">
      <template #default="scope">
        {{ scope.row.gender === 1 ? '男' : '女' }}
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" width="180">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
// 表格数据源
const tableData = ref([
  { id: 1, name: '张三', age: 20, gender: 1 },
  { id: 2, name: '李四', age: 22, gender: 1 },
  { id: 3, name: '王五', age: 18, gender: 2 }
]);
// 编辑行数据
const handleEdit = (row) => {
  ElMessage.info(`编辑用户：${row.name}`);
  // 此处可打开编辑弹窗，回显行数据
};
// 删除行数据
const handleDelete = (row) => {
  // 实际项目中需添加确认弹窗
  tableData.value = tableData.value.filter(item => item.id !== row.id);
  ElMessage.success(`删除用户：${row.name} 成功`);
};
</script>

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // Vue插件
import path from 'path';
export default defineConfig({
  plugins: [vue()], // 启用Vue插件
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src') // 设置@为src目录别名，简化导入路径
    }
  },
  server: {
    port: 5173, // 开发服务器端口（默认5173）
    open: true, // 启动后自动打开浏览器
    proxy: {
      // 代理转发：解决跨域问题
      '/api': {
        target: 'http://localhost:3000', // 后端接口基础地址
        changeOrigin: true, // 开启跨域
        rewrite: (path) => path.replace(/^\/api/, '') // 重写路径，去掉/api前缀
      }
    }
  },
  build: {
    outDir: 'dist', // 打包输出目录
    sourcemap: false, // 生产环境不生成sourcemap（减少包体积，保护源码）
    minify: 'terser' // 使用terser压缩代码
  }
});

# 创建Vue2项目（需先安装Vue CLI：npm install -g @vue/cli）
vue create vue2-project
# 启动开发服务器（热更新）
npm run serve
# 打包构建（生成生产环境代码）
npm run build
# 打开可视化配置界面
vue ui