elementui install

安装 Element UI

Element UI 可以通过 npm 或 yarn 安装，适用于 Vue.js 项目。以下是安装和配置的详细步骤。

使用 npm 安装 运行以下命令安装 Element UI：

npm install element-ui -S

使用 yarn 安装 如果使用 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';

Vue.use(ElementUI);

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

npm install babel-plugin-component -D

然后在 babel.config.js 或 .babelrc 中配置：

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

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

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

使用 CDN 引入

如果不使用 npm 或 yarn，可以通过 CDN 引入 Element UI。在 HTML 文件中添加以下代码：

<!-- 引入样式 -->
<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>

配置主题

Element UI 支持自定义主题。可以通过安装主题生成工具进行配置：

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

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

et -i
et

常见问题

• 如果遇到样式未加载的问题，检查是否正确引入了 CSS 文件。
• 按需引入时，确保 babel 配置正确，避免组件未注册的错误。