Element-plus的基本使用

什么是Element-plus

    Element Plus是一套基于Vue 3.0的桌面端组件库，旨在为开发者提供一套丰富的UI组件集合，帮助开发者快速构建现代化的Web应用程序。

    官网:https://element-plus.org/zh-CN/#/zh-CN

快速入门

在使用之前，要先做好准备工作，这些都可以前往官方文档查看

1、创建一个工程化的vue项目

2、参照官方文档，安装Element Plus组件库:npm install element-plus --save

3、在main.js中引入Elemrnt Plus组件库

导入分为完整导入和按需导入，如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

完整导入：

是指将Element-Plus的所有组件及其样式一次性导入到Vue项目中。

1. 优点：操作简单，无需为每个组件单独引入。

2. 缺点：会增加打包后的文件体积，可能影响应用的加载速度，特别是当项目中只使用了Element-Plus的少数组件时。

 按需导入：

按需导入是指只导入项目中实际需要用到的Element-Plus组件和样式。

1. 优点：可以显著减少打包后的文件体积，提高应用的加载速度。

2. 缺点：需要额外的配置步骤，且当项目中使用的组件较多时，配置可能会变得复杂。

完整导入 

创建好项目之后，根据官方文档，将以下代码放入到main.js中

// main.ts
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')

---

接下来在src目录下面创建一个测试文件Buttom.vue，在官网组件模块将代码复制到vue文件内，

将创建项目时的App.vue里面的内容删除，仅导入Button.vue进行测试。

<script setup>
import ButtonVue from './Button.vue'

</script>

<template>
  <ButtonVue></ButtonVue>
</template>

最后运行项目：

 除了基本使用，官网还提供了一些其他API

选择3种属性进行实验：

    <el-button type="primary" loading="true">Primary</el-button>
    <el-button type="success" circle="true">Success</el-button>
    <el-button type="info" disabled="true">Info</el-button>

按需导入 

按需导入需要额外的插件来导入需要的组件。

unplugin-vue-components 

unplugin-auto-import

 npm install -D unplugin-vue-components unplugin-auto-import

接下来把下列代码插入到你的 Vite 或 Webpack 的配置文件中：

 Vite

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

在里面的基础上加上这段代码独有的代码。

Webpack 

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

 接下来直接在App.vue中试用该组件：

<template>
<el-button>按需导入</el-button>
<el-button type="primary" loading="true">按需导入</el-button>
<el-button type="danger" plain>按需导入</el-button>
</template>

可以看到导入已经成功。