UI 神器 - Vue3 中如何使用 element-plus

news/2024/7/27 7:38:46/文章来源:https://blog.csdn.net/weixin_39801169/article/details/137135804

Element Plus 是一个基于 Vue 3 的 UI 组件库，由饿了么前端团队开发，旨在为设计师和开发者提供一套高效、易用的组件，以帮助快速搭建企业级的后台产品。以下是 Element Plus 的一些基础用法：

快速开始

完整引入：
如果你对打包后的文件大小不是很在乎，可以选择完整导入 Element Plus。在你的项目的入口文件（如 main.ts）中，可以按以下方式引入 Element Plus 及其样式：

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

Volar 支持：
如果你使用 Volar 作为你的 IDE 的插件，为了支持全局组件类型，你需要在 tsconfig.json 中指定 types 配置：
```
{"compilerOptions": {// ..."types": ["element-plus/global"]}
}
```

按需导入：
为了优化你的项目大小，你可以选择按需导入 Element Plus 组件。你可以使用一些插件，如 unplugin-auto-import 和 unplugin-vue-components 来实现这一点。

对于 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()],}),],
}

使用 Element Plus 组件

手动导入：
如果你想手动导入特定的组件，可以直接在你的 Vue 文件中导入所需的组件。例如，如果你想使用 ElButton 组件，可以这样做：
```
<template><el-button>I am ElButton</el-button>
</template><script>
import { ElButton } from 'element-plus'export default {components: {ElButton,},
}
</script>
```
快捷搭建项目模板：
Element Plus 提供了 Vite 模板，你可以通过该模板快速开始一个新的 Element Plus 项目。对于 Laravel 用户，也有相应的模板可供使用。

全局配置：
当你引入 Element Plus 时，可以传入一个全局配置对象，用于设置表单组件的默认尺寸（size）和弹出组件的层级（zIndex）。

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'const app = createApp(App)
app.use(ElementPlus, {size: 'small',zIndex: 3000,
})
app.mount('#app')