element-ui

element-ui官网中文,elementui最受歡迎的前端组件库

简介

Element UI 是一个基于 Vue.js 的桌面端组件库，它由餓了么團队（ElemeFE）開發并维護。Element UI 提供了一系列预設计的组件，这些组件遵循 Material Design 設计语言，使得開發者能够快速构建出美觀、响应式的网页界面。

element-ui官网中文: https://element.eleme.cn/#/zh-CN

Element UI基于Vue.js框架開發，它提供了诸如按鈕、输入框、下拉菜單、表格、圖表等常用的UI组件，涵蓋了開發中常見的需求，同时还支持客製化主题，開發者可以根据專案需要轻松定制界面样式，使得应用与眾不同。

Element U田是一套為開發者、設计師和產品經理准備的基于 vue 2.0 的桌面端组件库。它提供了一系列開箱即用的组件，帮助我们快速构建用户界面。本文將详細介绍如何快速入門 Element U，并透過一些實例来展示其强大功能。

環境准備

在開始使用 Element UI 之前，我们需要先准備好開發環境。我们假設你已經具備了基本的 vue.js 知識，并已安装了 Nodejs 和npm

Element-UI 是一款為開發者提供丰富组件和功能的 Vue.js 2.0 基于框架的桌面端 UI 组件库。以下是 Element-UI 的快速入門指南。

element-ui教程

由于 Element UI 组件比較多，接下来会挑選一些常用的组件进行講解。

✨提示

在从来没有接触过 UI 组件库之前，我们页面上所有元素的样式效果和交互动作都要自己挨个去實现，就会增加很多的工作量。Element UI 组件库中提供了按鈕、圖标、输入框、評分组件、輪播圖、訊息提示、對话框等等一系列组件。大幅提升了我们的開發效率。

?安装

✨注意

后續演示將会在 Vue CLI 搭建的 Vue 專案上进行操作。如需要请查看 Vue CLI 安装

?透過 YARN 命令安装

$ yarn add element-ui

?完整引入
代表一次性引入所有组件，比較省心省事，但是專案的打包体积也会跟着變大。

import Vue from ‘vue’
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(ElementUI)

?按需引入
在實際專案開發中建議使用按需引入，也就是用多少组件，就引入多少组件。可以大大節省打包的体积。

import Vue from ‘vue’
import { Button } from ‘element-ui’
import ‘element-ui/lib/theme-chalk/base.css’
import ‘element-ui/lib/theme-chalk/button.css’
Vue.use(Button)

?基礎案例
<template>
<div id=”app”>
<el-button>Button</el-button>
</div>
</template>

UI設计師要懂的web前端開發術语