搭建elementui

安装Element UI

Element UI是一个基于Vue.js的组件库，适用于快速开发前端界面。在Vue项目中安装Element UI需要确保项目已初始化并安装了Vue.js。

使用npm安装Element UI：

npm install element-ui -S

或者使用yarn安装：

yarn add element-ui

引入Element UI

在项目中引入Element UI有两种方式：完整引入和按需引入。完整引入会加载所有组件，适合快速开发；按需引入可以减少打包体积。

完整引入方式（在main.js中配置）：

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({
  el: '#app',
  render: h => h(App)
});

按需引入方式（需安装babel-plugin-component）：

npm install babel-plugin-component -D

修改.babelrc文件：

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

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

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

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

使用Element UI组件

引入Element UI后，可以直接在Vue组件中使用其提供的UI组件。例如，使用按钮和表格组件：

<template>
  <div>
    <el-button type="primary">主要按钮</el-button>
    <el-table :data="tableData">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: '张三' },
        { date: '2023-01-02', name: '李四' }
      ]
    };
  }
};
</script>

定制主题

Element UI支持主题定制，可以通过修改变量或使用在线主题生成工具实现。

安装主题工具：

npm install element-theme -g
npm install element-theme-chalk -D

初始化变量文件：

et -i

编译主题：

et

在项目中引用生成的主题文件：

import '../theme/index.css';
import ElementUI from 'element-ui';
Vue.use(ElementUI);

国际化支持

Element UI默认支持中文，如需其他语言，可以引入对应的语言包并配置。

引入英文语言包：

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

Vue.use(ElementUI, { locale });

动态切换语言：

this.$i18n.locale = 'en';
const locale = require('element-ui/lib/locale/lang/en');
ELEMENT.locale(locale);