elementui上手

Element UI 上手指南

Element UI 是基于 Vue.js 的桌面端组件库，提供丰富的 UI 组件和交互功能。以下是快速上手的方法：

安装 Element UI

通过 npm 或 yarn 安装：

npm install element-ui --save
# 或
yarn add element-ui

引入 Element UI

在 Vue 项目中全局引入：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

按需引入（推荐）：

import { Button, Select } from 'element-ui';
import 'element-ui/lib/theme-chalk/button.css';
import 'element-ui/lib/theme-chalk/select.css';

Vue.use(Button);
Vue.use(Select);

基础使用示例

创建一个简单的按钮：

<template>
  <el-button type="primary">点击</el-button>
</template>

配置主题

修改主题变量：

1. 安装主题生成工具：

   npm install element-theme -g

2. 初始化变量文件：

   et --init

3. 编译主题：

   et

常用组件

• 表单组件：el-form, el-input
• 表格组件：el-table
• 弹窗组件：el-dialog
• 导航组件：el-menu

文档与资源

• 官方文档：https://element.eleme.io
• GitHub 仓库：https://github.com/ElemeFE/element
• 社区支持：Vue 论坛或 GitHub Issues

通过以上步骤可以快速开始使用 Element UI 开发项目。建议从简单组件开始逐步熟悉其设计模式和 API。