系列文档目录
Pinia引入
文章目录
目录
[一、Element Plus 特点](#一、Element Plus 特点)
[二、安装与引入--Element Plus 与Icons](#二、安装与引入--Element Plus 与Icons)
前言
Element Plus 是一个基于 Vue 3 的现代化 UI 组件库,继承了 Element UI 的设计理念和代码风格,同时针对 Vue 3 的新特性进行了优化。它提供了一系列丰富且功能强大的组件,如按钮、表单、弹窗、表格等,帮助开发者快速构建美观且功能齐全的用户界面。
一、Element Plus 特点
-
基于 Vue 3:完全兼容 Vue 3 的新特性,如 Composition API、Suspense 等,充分利用 Vue 3 的性能优势。
-
丰富的组件库:提供了超过 100 个组件,覆盖了几乎所有常见的 UI 需求,包括基础组件(按钮、输入框等)、布局组件(栅格系统、容器等)、表单组件(表单验证、选择框等)以及数据展示组件(表格、分页等)。
-
高度可定制:支持主题定制,开发者可以根据自己的需求调整组件的样式和行为。
-
国际化支持:提供多语言支持,方便开发国际化应用。
-
高性能:优化了组件的渲染性能,确保在复杂场景下也能保持流畅的用户体验。
二、安装与引入--Element Plus 与Icons
1.安装
在项目终端运行分别运行:
$ npm install element-plus --save
TypeScript
npm install @element-plus/icons-vue
2.引入
官方提供三种引用方式,本项目采用完整引入。
TypeScript
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import App from './App.vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(ElementPlus, {
locale: zhCn,
})
app.mount('#app')
3.调整App.vue
该app.vue是基于Vue3+Vite+TypeScript安装
html
<script setup lang="ts">
// 定义 size 和 color 的类型及默认值
import { ref } from 'vue';
const size = ref<number | string>('20px'); // 或者使用具体数值如 20
const color = ref<string>('#409EFF'); // 默认颜色
</script>
<template>
<div>
<h1>第一个显示内容</h1>
</div>
<div>
<el-button type="primary">Primary</el-button>
</div>
<el-icon :size="size" :color="color">
<Edit />
</el-icon>
</template>
<style scoped>
/* 样式可根据需求添加 */
</style>
4.运行测试
html
npm run dev

参考文献
1.element plus 官方网址:++++https://element-plus.org/++++
2.element plus icon官方网址: https://element-plus.org/zh-CN/#/zh-CN/component/icon