Element Plus快速入门及常用组件

一. 快速入门

1.1 准备工作

        在开始使用Element Plus之前，需要先准备好一个Vue.js项目，并安装Element Plus组件库。

1. 创建一个工程化的Vue项目。
2. 在项目的根目录下执行以下命令，安装Element Plus组件库：

npm install element-plus --save

        在项目的main.js文件中引入Element Plus组件库，并使用它：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

1.2 制作常用组件

        Element Plus提供了丰富的UI组件，可以快速构建界面。以下是一个常见的表格组件示例，包含了标题、分类、发表时间、状态以及操作按钮等内容。

<script lang="ts" setup>
    import {
        Delete,
        Edit
    } from '@element-plus/icons-vue'

    const tableData = [{
        title: '标题1',
        category: '时事',
        time: '2024-01-01',
        state: '已发布',
    }]
</script>

<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="文章标题" />
        <el-table-column prop="category" label="分类" />
        <el-table-column prop="time" label="发表时间" />
        <el-table-column prop="state" label="状态" />
        <el-table-column label="操作" width="180">
            <div>
                <el-button type="primary" :icon="Edit" circle />
                <el-button type="danger" :icon="Delete" circle />
            </div>
        </el-table-column>
    </el-table>
</template>

二. 结语

        Element Plus是一个功能强大且易于使用的Vue.js UI组件库。希望这篇推文能够帮助你更快地上手Element Plus，并加速项目的开发过程。

如果有任何疑问或者想分享你的经验，欢迎在评论区留言，让我们一起进步！