elementui搭建

安装 Element UI

通过 npm 安装 Element UI 是推荐的方式。在项目根目录下运行以下命令：

npm install element-ui --save

引入 Element UI

在项目的入口文件（通常是 main.js 或 main.ts）中引入 Element UI 并注册：

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

Vue.use(ElementUI);

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

按需引入组件（可选）

如果项目对体积敏感，可以通过 babel-plugin-component 按需引入组件。首先安装插件：

npm install babel-plugin-component -D

在 babel.config.js 中配置插件：

module.exports = {
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
};

之后在需要的地方单独引入组件：

import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

使用组件

在 Vue 单文件组件中直接使用 Element UI 的组件：

<template>
  <el-button type="primary">按钮</el-button>
  <el-date-picker v-model="date"></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      date: ''
    };
  }
};
</script>

主题定制

如果需要自定义主题，可以使用官方主题生成工具。首先安装主题生成工具：

npm i element-theme -g
npm i element-theme-chalk -D

初始化变量文件并编译主题：

et -i
et

在项目中引用编译后的主题文件：

import '../theme/index.css';

国际化支持

Element UI 默认支持中文，如需其他语言可以按需引入：

import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';

Vue.use(ElementUI, { locale });

与 Vue CLI 项目集成

在 Vue CLI 创建的项目中，可以通过 vue add 命令快速集成 Element UI：

vue add element

按照提示选择完整引入或按需引入即可完成配置。

常见问题解决

样式未生效时检查是否引入了 CSS 文件。组件未注册时确认是否正确调用了 Vue.use() 或单独注册了组件。按需引入无效时检查 babel 配置是否正确。