要使用 Element Plus 创建一个新增文章的页面，你可以结合使用表单组件 el-form、输入框组件 el-input、按钮组件 el-button 和其他相关组件。以下是一个简单的示例，展示如何创建一个用于新增文章的基本表单页面。

安装 Element Plus

确保你已经安装了 Element Plus。如果还没有安装，请使用以下命令：

npm install element-plus

创建新增文章页面

下面是一个新增文章页面的示例代码：

<template>
  <div>
    <h2>新增文章</h2>
    <el-form :model="article" :rules="rules" ref="articleForm" label-width="120px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="article.title" placeholder="请输入文章标题"></el-input>
      </el-form-item>

      <el-form-item label="作者" prop="author">
        <el-input v-model="article.author" placeholder="请输入作者姓名"></el-input>
      </el-form-item>

      <el-form-item label="日期" prop="date">
        <el-date-picker v-model="article.date" type="date" placeholder="选择日期"></el-date-picker>
      </el-form-item>

      <el-form-item label="内容" prop="content">
        <el-input type="textarea" v-model="article.content" placeholder="请输入文章内容"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const article = ref({
      title: '',
      author: '',
      date: '',
      content: '',
    })

    const rules = ref({
      title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
      author: [{ required: true, message: '请输入作者姓名', trigger: 'blur' }],
      date: [{ required: true, message: '请选择日期', trigger: 'change' }],
      content: [{ required: true, message: '请输入文章内容', trigger: 'blur' }],
    })

    const articleForm = ref(null)

    const submitForm = () => {
      articleForm.value.validate((valid) => {
        if (valid) {
          console.log('提交的文章:', article.value)
          // 这里可以添加提交逻辑，例如调用API
          alert('提交成功!')
        } else {
          console.log('表单验证失败')
          return false
        }
      })
    }

    const resetForm = () => {
      articleForm.value.resetFields()
    }

    return {
      article,
      rules,
      articleForm,
      submitForm,
      resetForm,
    }
  }
}
</script>

<style>
/* 可以在这里添加自定义样式 */
</style>

代码说明

• **el-form**：用于创建表单容器。
• :model="article"：绑定表单数据对象。
• :rules="rules"：绑定表单验证规则。
• ref="articleForm"：用于访问表单实例。
• **el-form-item**：用于定义表单中的每一项。
• label：表单项的标签。
• prop：表单项的属性名，与 rules 中的规则对应。
• **el-input**：用于输入文本内容。
• v-model：双向绑定表单数据。
• **el-date-picker**：用于选择日期。
• type="date"：指定为日期选择器。
• **el-button**：用于提交和重置表单。
• type="primary"：设置按钮为主色调。
• 表单验证：通过 rules 对象定义表单验证规则，确保用户输入的数据符合要求。

扩展功能

• 提交到后端：在 submitForm 方法中，可以添加 API 调用逻辑，将表单数据提交到后端。
• 自定义样式：可以根据需要调整表单的样式，以符合你的设计需求。
• 动态表单：如果需要动态生成表单字段，可以使用 v-for 指令来动态渲染表单项。

通过这种方式，你可以快速创建一个功能齐全的新增文章页面，并根据需要进行扩展和定制。