前端- ElementPlus入门

1.介绍

Element：是饿了么公司前端开发团队提供的一套基于 Vue3 的网站组件库，用于快速构建网页。

Element 提供了很多组件供我们使用。例如 超链接、按钮、图片、表格等等。

官方网站：一个 Vue 3 UI 框架 | Element Plus

2.步骤

1.安装ElementPlus的组件库

npm install element-plus@2.4.4 --save

2.在main.js 中引入ElementPlus组件库 （参照官方文档）快速开始 | Element Plus

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)

app.mount('#app')

3.访问ElementPlus的官方文档，查看对应的组件源代码。Overview 组件总览 | Element Plus

 3.入门案例

在 src下创建 views 目录，在 views 目录下，创建Element.vue组件文件，复制组件代码，调整成自己想要的 。

<script setup>

</script>

<template>
  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>
</template>

<style scoped>

</style>

在根组件 app.vue 中引入Element.vue

<script setup>
<!--  第一步-->
import Element from './views/Element.vue'
</script>

<template>
<!--  第二步-->
  <Element></Element>
</template>

<style scoped>

</style>

测试

4.常用设置

 默认情况下，ElementPlus的组件是英文的，如果希望使用中文语言，可以在 main.js 中做如下配置：

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, {locale: zhCn})