安装elementui

安装 Element UI

Element UI 是一个基于 Vue.js 的组件库，提供丰富的 UI 组件。以下是安装 Element UI 的几种方法：

使用 npm 安装

确保已安装 Node.js 和 npm，运行以下命令安装 Element UI：

npm install element-ui -S

使用 yarn 安装

如果使用 yarn 作为包管理器，运行以下命令：

yarn add element-ui

CDN 引入

在 HTML 文件中通过 CDN 引入 Element UI：

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

完整引入

在 Vue 项目中，可以在 main.js 中全局引入 Element UI：

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

Vue.use(ElementUI);

按需引入

如果需要优化体积，可以按需引入组件。首先安装 babel-plugin-component：

npm install babel-plugin-component -D

修改 babel.config.js 文件：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
};

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

import { Button, Select } from 'element-ui';

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

主题定制

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

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

初始化变量文件：

et -i

修改生成的 element-variables.scss 文件后，编译主题：

et

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

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