当前位置：首页 > 前端教程

elementui导入

2026-03-06 04:26:14前端教程

安装 Element UI

通过 npm 或 yarn 安装 Element UI。在项目根目录下运行以下命令：

npm install element-ui --save
# 或
yarn add element-ui

引入 Element UI

在项目中引入 Element UI，可以选择完整引入或按需引入。

完整引入方式：

在项目的入口文件（如 main.js 或 main.ts）中添加以下代码：

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 --save-dev
# 或
yarn add babel-plugin-component --dev

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

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

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

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import 'element-ui/lib/theme-chalk/button.css';
import 'element-ui/lib/theme-chalk/select.css';

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

使用 Element UI 组件

在 Vue 组件中直接使用 Element UI 提供的组件。例如：

<template>
  <el-button type="primary">按钮</el-button>
</template>

<script>
export default {
  name: 'MyComponent',
};
</script>

国际化支持

如果需要支持其他语言，可以引入 Element UI 的国际化配置：

import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en'; // 引入英文语言包

Vue.use(ElementUI, { locale });