Vue3简单使用element-plus组件库

---

前言

在vue3中简单使用element-plus组件库前，要配置好所需要的环境依赖，如Node.js，可以在官方中文网上下载
中文网链接: Nodejs，下载最新稳定版本

下载完成下一步下一步即可，安装完毕后按win+r打开cmd命令窗口输入node -v和npm -v来检查一下是否正常运行 ，当出现版本号表示可以正常运行

---

一、Vue3是什么？

vue是一种渐进式JavaScript 框架，可以快速为我们搭建前端项目框架，使用响应式数据进行渲染页面。
Vue3官方文档：Vue3官方文档

二、element-plus组件库

1.什么是element-plus组件库

element-plus组件库是由饿了么团队为Vue3发布的组件库，我们在开发时可以直接引入相关组件，其样式已经为我们设计好了，也可以自己更改。

官网：element-plus

三 创建项目并使用element-plus组件

先创建一个Vue3模板项目，在工作区使用win+r打开cmd命令窗口，接着输入npm create vue@latest ，在下方输入项目名字，然后按下回车键

这里我们都选否，直接回车，目前还用不到。
当出现 cd vuedemo , npm install, npm run dev表示我们已经创建完毕项目。接着我们分别输入cd vuedemo , npm install, npm run dev这三个命令，在下方出现 http://localhost:5173/即表示我们的项目已经跑起来了

接着在浏览器输入 http://localhost:5173/即可查看运行效果图页面

下载element-plus组件库，在项目的根目录使用cmd窗口输入npm install element-plus --save 进行下载组件库
当出现added 23 packages in 6s即加载成功。可以打开package.json文件夹中查看是否存在"element-plus": "^2.6.1",

在src/main.js文件中修改以下内容，来全局使用

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).mount('#app')

我们就在默认vue组件使用最简单的ElementPlus Button按钮
因为刚才全局引入过element-plus所以可以在App.vue中按照下面这样写

<script setup>
import { ElButton } from 'element-plus'
</script>

<template>
  <div class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>

  <div class="mb-4">
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </div>
</template>

<style scoped></style>

再次运行查看效果如图

---

总结

想要创建vue+element-plus要先配置好Nodejs，所以我们要确保nodejs是正常运行的，且版本不能过低。其他element-plus组件用法一样，引入时可以自定义api去设计组件样式。