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>更多组件的使用，去这看：更多组件
