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

elementui项目

2026-01-15 20:41:15前端教程

ElementUI 项目搭建与使用指南

环境准备

确保已安装 Node.js（建议版本 14+）和 npm/yarn。

创建 Vue 项目

通过 Vue CLI 快速初始化项目：

vue create element-project

选择默认配置或手动配置（需包含 Babel 和 Vue Router）。

安装 ElementUI

进入项目目录并安装 ElementUI：

elementui项目

cd element-project
npm install element-ui

全局引入 ElementUI

在 src/main.js 中全局引入 ElementUI 及其样式：

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 -D

修改 babel.config.js：

elementui项目

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

按需引入组件（示例在 src/main.js）：

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

使用组件

在 Vue 单文件组件中直接使用 ElementUI 组件：

<template>
  <el-button type="primary">按钮</el-button>
  <el-select v-model="value" placeholder="请选择">
    <el-option label="选项1" value="1"></el-option>
  </el-select>
</template>

自定义主题

安装主题生成工具：

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

初始化变量文件并编译：
```
et -i
et
```
在 main.js 中引用生成的主题文件：
```
import '../theme/index.css';
```

国际化支持

引入语言包（如中文）：

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

Vue.use(ElementUI, { locale });

项目示例结构

element-project/
├── src/
│   ├── components/      # 自定义组件
│   ├── views/           # 页面组件
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件
└── public/              # 静态资源

通过以上步骤可快速搭建基于 ElementUI 的 Vue 项目，灵活选择全局或按需引入以平衡功能与性能。