element-plus组件库的使用-蒲公英云

在这里插入图片描述

一、安装

https://element-plus.gitee.io/zh-CN/guide/installation.html

方法一：使用vue ui命令

方式二：打开命令行，进入项目目录中，执行命令

npm install element-plus --save
npm install @element-plus/icons-vue

第一步：打开命令行输入vue ui 进入可视化的界面管理工具

C:\Users\Lenovo>vue ui
�  Starting GUI...
�  Ready on http://localhost:8000

在这里插入图片描述

第二步：点击依赖安装，搜索 element-plus，选中安装

在这里插入图片描述

第三步：项目中配置element-plus和icons-vue（开发项目直接copy就可以）

import {
     createApp } from 'vue'
//导入安装的element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const app = createApp(App)
//注册element-plus
app.use(ElementPlus,{
    locale: zhCn,
})
//注册图标库
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.mount('#app')

二、使用

1、按钮组件的使用

<template>
    <h1>element组件库的使用演示</h1>
    <!-- 按钮组件的使用 -->
    <el-button icon='Delete' type="primary">按钮</el-button>
    <el-button icon='User' color="#fff">按钮</el-button>
    <el-button color="#fff" icon="Share">按钮</el-button>
    <el-button icon='Delete' type="success">按钮</el-button>
    <!-- 分割线 -->
    <el-divider border-style="dashed" />
    <el-row class="mb-4">
        <el-button round>Round</el-button>
        <el-button icon="User" type="primary" round>确认</el-button>
        <el-button type="success" round>Success</el-button>
        <el-button type="info" round>Info</el-button>
        <el-button type="warning" round>Warning</el-button>
        <el-button type="danger" round>Danger</el-button>
      </el-row>
</template>

在这里插入图片描述

2、图标组件的使用

单独使用图标组件

<el-icon color="#ff007f" size="100px"><StarFilled /></el-icon>
<el-icon color="#0000ff" size="100px"><Message /></el-icon>

在这里插入图片描述

按钮中使用图标组件

<el-row class="mb-4">
    <el-button round>Round</el-button>
    <el-button icon="User" type="primary" round>确认</el-button>
    <el-button icon="Share" type="success" round>Success</el-button>
    <el-button icon="Platform" type="info" round>Info</el-button>
    <el-button icon="Football" type="warning" round>Warning</el-button>
    <el-button icon="Comment" type="danger" round>Danger</el-button>
</el-row>

在这里插入图片描述

3、分割线组件

<template>
    <h1>分割线组件</h1>
    <el-divider>
          <el-icon><star-filled /></el-icon>
    </el-divider>
    <el-divider content-position="right">分割线</el-divider>
</template>

4、页面布局组件

<el-container>
          <el-header style="background: burlywood;">Header</el-header>
          <el-container>
              <!--左侧-->
            <el-aside width="200px">
                <div style="height:800px;background: antiquewhite;">左侧</div>
            </el-aside>
            <!-- 右侧 -->
            <el-main>
                <div style="height:800px;background: mediumaquamarine;">右侧</div>
            </el-main>
          </el-container>
</el-container>

5、单行布局组件

<el-row :gutter="20">
    <el-col :span="6">
        <div class="box">div1</div>
    </el-col>
    <el-col :span="6">
        <div class="box">div2</div>
    </el-col>
    <el-col :span="6">
        <div class="box">div3</div>
    </el-col>
    <el-col :span="6">
        <div class="box">div4</div>
    </el-col>
</el-row>

在这里插入图片描述

5、数据展示组件

<template>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column label="名字" width="180">
        <template #default="scope">
            {
   {scope.row}}
        </template>
    </el-table-column>    
    <el-table-column prop="address" label="地址" width="180" />
    <el-table-column label="操作">
        <template #default="scope">
            <div v-if="scope.$index%2===0">
                <el-button icon="Delete" type="danger">删除</el-button>
                <el-button icon="Edit" type="primary" >编辑</el-button>
            </div>
            <div v-else>
                <el-button icon="Delete" type="success">删除</el-button>
                <el-button icon="Edit" type="warning" >编辑</el-button>
            </div>
        </template>
    </el-table-column>
  </el-table>
</template>
<script>
    export default{
        data(){
            return{
                tableData:[
                    {
                    date:'123',
                    name:'324',
                    address:'454'
                    },
                    {
                    date:'123',
                    name:'324',
                    address:'454'
                    },],
                items:[
                        {
       type: 'success', label: 'Tag 2' },
                ]
            }
        }
    }
</script>

在这里插入图片描述

6、表单组件

<template>
     <el-form
          :model="loginForm"
          :rules="FormRules"
          label-width="120px"
          class="demo-ruleForm">
          <el-form-item label="密码" prop="password">
                <el-input v-model="loginForm.password"  type="password" />
          </el-form-item>
          <el-form-item label="姓名" prop="username">
            <el-input type="text" v-model="loginForm.username"/>
          </el-form-item>
          <el-form-item label="Age" >
            <el-input v-model="age" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button>
            <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
          </el-form-item>
    </el-form>
</template>
<script>
    export default{
        data(){
            return{
                loginForm:{
                            username:"",
                            password:"",
                            status:false,
                            },
                // 登录表单的校验规则
                FormRules:{
                    // username的校验规则
                    username:[
                         {
       required: true, message: '用户名不能为空', trigger: 'blur' },
                    ],
                    // password的校验规则
                    password:[
                        {
       required: true, message: '密码不能为空', trigger: 'blur' },
                        {
       min: 4,max: 18, message: '密码长度需要在4-18位之间', trigger: 'blur' },
                    ]
                }
            }
        },
        methods:{
        }
    }
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>