Vue3整合Element Plus过程

Vue 是一种流行的JavaScript框架，用于构建交互式和现代化的Web应用程序。Vue 3是Vue框架的最新版本，带来了新特性和改进。而Element Plus是一个基于Vue框架的UI组件库，它提供了丰富的UI组件和样式，能够帮助我们快速构建出漂亮且功能强大的用户界面。Element plus的官网：

A Vue 3 UI Framework | Element Plus

以下是集成过程的个人笔记：

第一步，创建一个Vue 3项目

首先，我们需要确保已经安装了Vue CLI。如果没有安装，可以使用以下命令进行安装：

npm install -g @vue/cli

安装完成后，可以使用以下命令创建一个新的Vue 3项目：

vue create my-app

根据提示进行选择，可以选择默认的配置或手动选择所需的功能。

第二步，安装Element Plus

进入项目目录并执行以下命令安装Element Plus：

cd my-app
npm install element-plus

安装完成后，我们可以在Vue组件中引入所需的Element Plus组件并使用它们。例如，在App.vue文件中：

<template>
  <div>
    <el-button type="primary">Hello Element Plus</el-button>
  </div>
</template>

<script>
import { ElButton } from 'element-plus';
export default {
  components: {
    ElButton
  }
}
</script>

这样，我们就可以在应用程序中使用Element Plus的按钮组件了。

第三步，自定义主题

Element Plus提供了一些默认的主题样式，但我们也可以根据需求进行自定义。在Vue 3中，我们可以使用新的setup函数来进行主题样式的自定义。例如，我们可以在main.js中按照以下方式进行自定义：

import { createApp } from 'vue';
import App from './App.vue';
import 'element-plus/lib/theme-chalk/index.css'; // 引入Element Plus默认的样式
import './styles/element-variables.scss'; // 引入自定义的主题样式

createApp(App).mount('#app');

在上述代码中，我们引入了Element Plus默认的样式文件index.css，然后再引入自定义的主题样式文件element-variables.scss。

除了按钮组件，Element Plus还提供了丰富的其他组件和工具，如表格、表单、弹窗、图标等。我们可以根据项目需求在Vue组件中引入所需的组件并使用它们。可以在Element Plus的官方文档中查找更多关于组件的信息和示例：Button 按钮 | Element Plus (element-plus.org)

组件使用

以下介绍几种组件的使用

Input 输入框组件

Input组件用于接收用户的输入，可以设置不同的类型（文本、密码等）和样式。

<template>
  <el-input v-model="inputValue" placeholder="请输入内容" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
};
</script>

Select 选择器组件

Select组件用于提供下拉选择的功能，可以设置选项列表和默认值等。

<template>
  <el-select v-model="selectedValue" placeholder="请选择">
    <el-option label="选项1" value="option1" />
    <el-option label="选项2" value="option2" />
    <el-option label="选项3" value="option3" />
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
    };
  },
};
</script>

Table 表格组件

Table组件用于展示数据表格，可以设置表头和表格内容等

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="age" label="年龄" />
    <el-table-column prop="email" label="邮箱" />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, email: 'zhangsan@example.com' },
        { name: '李四', age: 25, email: 'lisi@example.com' },
        { name: '王五', age: 30, email: 'wangwu@example.com' },
      ],
    };
  },
};
</script>

Form 表单组件

Form组件用于创建表单，可以包含输入框、选择器等表单元素。

<template>
  <el-form :model="formData" label-width="80px">
    <el-form-item label="姓名">
      <el-input v-model="formData.name" />
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model="formData.age" />
    </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 {
      formData: {
        name: '',
        age: '',
      },
    };
  },
  methods: {
    submitForm() {
      // 提交表单数据
    },
  },
};
</script>

更多组件的使用，去这看：更多组件