elementui教程

### ElementUI 使用教程

#### 一、安装ElementUI

为了使用ElementUI，可以通过npm来安装该库。这使得开发者可以方便地管理项目依赖并保持更新。

npm install element-ui -S

对于想要快速体验而不改变现有项目的开发人员来说，也可以通过CDN的方式引入ElementUI[^1]。

#### 二、按需加载组件

如果只打算使用部分组件，则推荐采用babel-plugin-component来进行按需导入。这样不仅可以减少打包后的文件大小，还能提高页面性能。

在`main.js`中配置如下：

import Vue from 'vue';
import { Button, Select } from 'element-ui'; // 导入所需组件
import App from './App.vue';

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

new Vue({
  el: '#app',
  render: h => h(App),
});

上述代码展示了如何单独引入Button和Select两个组件，并注册到全局环境中以便于后续调用[^2]。

#### 三、全局引入ElementUI样式表

当决定在整个应用中广泛使用ElementUI时，可以选择一次性全部引入其CSS资源，在`main.js`里加入下面这一行即可完成操作:

@import url('https://unpkg.com/element-ui/lib/theme-chalk/index.css');
// 或者本地路径 @import "~element-ui/lib/theme-chalk/index.css";

此方法适用于希望简化设置流程的情况，但可能会增加不必要的网络请求或包体积。

#### 四、实例化按钮组件

以创建一个简单的按钮为例，可以在HTML模板内编写如下结构：

<template>
  <el-button type="primary">主要按钮</el-button>
</template>

<script>
export default {
};
</script>

这里定义了一个具有“主要”样式的按钮控件，它会呈现蓝色背景色的效果。更多关于属性设定的信息可查阅官方文档中的详细介绍。