正文

掌握Vue3 Element UI，轻松搭建页面，从入门到实战指南

/0 浏览量
1012

前言

随着前端技术的发展，Vue.js已经成为最受欢迎的前端框架之一。Element UI作为Vue.js官方提供的一套桌面端组件库，极大地简化了Vue项目的开发过程。本文将带你从零开始，一步步掌握Vue3和Element UI，轻松搭建出美观、高效的页面。

一、Vue3简介

1.1 Vue3的优势

  • 性能提升：Vue3在性能上进行了大量优化，包括编译速度、运行效率等。
  • Composition API：提供了更灵活的组件逻辑组织方式，使代码更易于维护。
  • 更好的类型支持：与TypeScript更紧密地集成，提供了更好的类型推导和错误检查。

1.2 Vue3的安装

首先，你需要安装Node.js和npm。然后，使用以下命令创建一个新的Vue3项目：

vue create my-vue3-project

进入项目目录，安装Element UI：

npm install element-plus --save

二、Element UI简介

2.1 Element UI的特点

  • 组件丰富：Element UI提供了丰富的组件，如按钮、表单、表格、对话框等，满足大部分页面需求。
  • 样式美观：Element UI的样式简洁、大方，符合现代设计风格。
  • 易于上手：Element UI遵循Vue.js的设计规范，对于熟悉Vue的开发者来说，上手非常容易。

2.2 Element UI的安装

在Vue3项目中，安装Element UI：

npm install element-plus --save

三、Vue3 + Element UI实战

3.1 创建项目结构

首先，创建一个基本的Vue3项目结构：

my-vue3-project/
├── src/
│   ├── components/
│   │   ├── MyComponent.vue
│   ├── App.vue
│   ├── main.js
├── public/
│   └── index.html
├── package.json
└── ...

3.2 使用Element UI组件

在App.vue中，引入Element UI：

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')

在App.vue中，使用Element UI组件：

<template>
  <el-button type="primary">点击我</el-button>
</template>

<script>
export default {
  name: 'App'
}
</script>

3.3 实现表单验证

使用Element UI的表单验证功能，实现用户注册表单：

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">注册</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          alert('注册成功！')
        } else {
          alert('注册失败，请检查输入')
        }
      })
    }
  }
}
</script>

3.4 使用Element UI的表格组件

使用Element UI的表格组件展示用户数据：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '张小刚',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '李小红',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '周小伟',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}
</script>

四、总结

通过本文的学习，相信你已经掌握了Vue3和Element UI的基本用法。在实际项目中，你可以根据需求选择合适的组件，并灵活运用它们。祝你在前端开发的道路上越走越远！

-- 展开阅读全文 --