Vue3+Vite+TypeScript+Element Plus开发-02.Element Plus安装与配置

系列文档目录

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