腾讯企业邮箱购买电脑优化大师
系列文档目录
Vue3+Vite+TypeScript安装
Element Plus安装与配置
主页设计
静态菜单设计
文章目录
目录
系列文档目录
文章目录
前言
一、Element Plus 特点
二、安装与引入--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 --savenpm install @element-plus/icons-vue2.引入
官方提供三种引用方式，本项目采用完整引入。
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安装
<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.运行测试
npm run dev
参考文献
1.element plus官方网址：https://element-plus.org/
2.element plus icon官方网址：https://element-plus.org/zh-CN/#/zh-CN/component/icon