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

系列文档目录

Vue3+Vite+TypeScript安装

Element Plus安装与配置

主页设计与router配置

静态菜单设计

Pinia引入


文章目录

目录

系列文档目录

文章目录

前言

[一、Element Plus 特点](#一、Element Plus 特点)

[二、安装与引入--Element Plus 与Icons](#二、安装与引入--Element Plus 与Icons)

1.安装

2.引入

3.调整App.vue

4.运行测试

参考文献


前言

Element Plus 是一个基于 Vue 3 的现代化 UI 组件库,继承了 Element UI 的设计理念和代码风格,同时针对 Vue 3 的新特性进行了优化。它提供了一系列丰富且功能强大的组件,如按钮、表单、弹窗、表格等,帮助开发者快速构建美观且功能齐全的用户界面。


一、Element Plus 特点

  1. 基于 Vue 3:完全兼容 Vue 3 的新特性,如 Composition API、Suspense 等,充分利用 Vue 3 的性能优势。

  2. 丰富的组件库:提供了超过 100 个组件,覆盖了几乎所有常见的 UI 需求,包括基础组件(按钮、输入框等)、布局组件(栅格系统、容器等)、表单组件(表单验证、选择框等)以及数据展示组件(表格、分页等)。

  3. 高度可定制:支持主题定制,开发者可以根据自己的需求调整组件的样式和行为。

  4. 国际化支持:提供多语言支持,方便开发国际化应用。

  5. 高性能:优化了组件的渲染性能,确保在复杂场景下也能保持流畅的用户体验。


二、安装与引入--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

相关推荐
逆袭的小黄鸭几秒前
深入剖析 JavaScript 执行上下文:代码运行的幕后机制
前端·javascript·面试
小old弟几秒前
闭包:从入门到“顿悟”的奇幻之旅
前端
晴殇i2 分钟前
抛弃 JavaScript 立即执行函数,这个方案更简洁更优雅
前端·javascript
码是生活2 分钟前
鸿蒙开发排坑:解决 resourceManager.getRawFileContent() 获取文件内容为空问题
前端·harmonyos
zoahxmy09293 分钟前
Vue3 视频播放与截图功能实现
javascript·vue.js
婷婷婷婷5 分钟前
v-copyText 自定义指令 —— 复制文本内容
前端
waylon111137 分钟前
【HOC】高阶组件在Vue老项目中的实战应用 - 模块任意排序
前端·vue.js·面试
阳阳羊8 分钟前
Mpx 动画
前端
编程社区管理员9 分钟前
「2025最新版React+Ant Design+Router+TailwindCss全栈攻略:从零到实战,打造高颜值企业级应用
前端·react.js·前端框架
DJA_CR9 分钟前
解决在 TSX 中使用 `RouterView` + `KeepAlive` 不生效问题
前端·vue.js