Vue 使用 Ele的简单步骤_的简单步骤_问题2如何按需引入Element UI的组件

作者：机器人技术佬 | 发布时间：2025-07-01 |

你要在你的 Vue 项目里装上 Element UI。用 npm 或 yarn 都行，命令如下：

npm install element-ui --save

或者

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)

这样，Element UI 就全局引入了。

如果你想用所有 Element UI 的组件，可以在 main.js 文件里直接注册：

Vue.component('el-button', ElementUI.Button)

这样，所有 Element UI 的组件就可以在项目里用了。

如果你只想要几个组件，可以按需引入，这样能减小文件大小，提升性能。安装按需加载插件：

npm install babel-plugin-component --save-dev

然后在 .babelrc 文件中添加配置：

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

现在就可以按需引入组件了，比如只引入按钮和输入框：

import { Button, Input } from 'element-ui'

引入和注册组件后，你就可以在 Vue 组件中使用 Element UI 的组件了。比如，在组件里加个按钮：

<template> <el-button>点击我</el-button> </template>

如果你想自定义主题，Element UI 提供了工具。先安装主题工具：

npm install less less-loader --save-dev

然后创建一个自定义主题文件，比如 element-variables.less，定义你的主题变量：

@primary-color: #409EFF;

修改构建配置文件，添加：

module.exports = { // ... resolveLoader: { alias: { 'vue-style-loader': 'vue-style-loader/lib/webpackHotDevServerMiddleware' } } }

引入编译后的主题文件：

import './element-variables.less'

通过以上步骤，你就能在 Vue 项目中顺利使用 Element UI 了。首先安装，然后引入并注册组件，按需引入以优化性能，最后可以定制主题。这样，Element UI 就能在你的项目中发挥作用，提高开发效率。