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

相关推荐
2401_837088501 分钟前
CSS清楚默认样式
前端·javascript·css
zwjapple12 分钟前
React 的 useEffect 清理函数详解
前端·react.js·前端框架
Jewel10522 分钟前
如何配置Telegram Mini-App?
前端·vue.js·app
s11show_1631 小时前
hz修改后台新增keyword功能
android·java·前端
二个半engineer1 小时前
Web常见攻击方式及防御措施
前端
co松柏1 小时前
程序员必备——AI 画技术图技巧
前端·后端·ai编程
前端大白话1 小时前
前端人速码!10个TypeScript神仙技巧,看完直接拿捏项目实战
前端·javascript·typescript
五号厂房1 小时前
React 异步回调中产生的闭包问题剖析及解决
前端
用户2031196600961 小时前
GeometryProxy 和 GeometryReader 的区别
前端
前端大白话1 小时前
前端必看!10个React实战技巧让你代码起飞,附超详细注释
前端·javascript·react.js