vue前端UI框架Element

简介

官网:https://element-plus.gitee.io/#/zh-CN

Element,一套为开发者、设计师和产品经理准备的基于 Vue的组件库,提供了配套设计资源,帮助你的网站快速成型,这里我们主要使用的是vue3.0 + Element Plus

安装

npm 安装

推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。

npm install element-plus --save

CDN

目前可以通过 unpkg.com/element-plus 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-plus/lib/index.full.js"></script>

引入element

完整引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

以上代码便完成了 Element Plus 的引入。需要注意的是,样式文件需要单独引入。

按需引入

借助 babel-plugin-component,引入需要的组件,以达到减小项目体积的目的

略(。。。)

全局配置

在引入 Element 时,可以传入一个全局配置对象。该对象目前支持 sizezIndex 字段。size 用于改变组件的默认尺寸,zIndex 设置弹框的初始 z-index(默认值:2000)。

完整引入 Element:

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 });

按需引入 Element:

import { createApp } from 'vue'
import { ElButton } from 'element-plus';
import App from './App.vue';
// 如果要使用.scss样式文件,则需要引入base.scss文件
// import 'element-plus/packages/theme-chalk/src/base.scss'

const app = createApp(App)
app.config.globalProperties.$ELEMENT = option
app.use(ElButton);

按照以上设置,项目中所有拥有 size 属性的组件的默认尺寸均为 'small',弹框的初始 z-index 为 3000。

国际化

Element Plus 组件内部默认使用英语,若希望使用其他语言,则需要进行多语言设置。以中文为例,在 main.js 中,如果是完整引入 Element Plus:

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn'

createApp(App).use(ElementPlus, { locale })

如果是通过 es modules 按需引入 Element Plus:

import { createApp } from 'vue'
import { ElButton, locale } from 'element-plus'
import lang from 'element-plus/lib/locale/lang/zh-cn'
import 'dayjs/locale/zh-cn'

locale(lang)
createApp(App).component(ElButton.name, ElButton)

如果是通过 babel-plugin-component 插件按需引入 Element Plus

import { createApp } from 'vue'
import { ElButton, ElSelect } from 'element-plus'
import lang from 'element-plus/lib/locale/lang/zh-cn'
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale'

// 设置语言
locale.use(lang)

// 引入组件
createApp(App).component(ElButton.name, ElButton)
createApp(App).component(ElSelect.name, ElSelect)

使用

这里使用的是按钮

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×