Element-ui环境配置

Element-ui配置详解：按需引入与完整引入

最新推荐文章于 2025-07-10 13:24:12 发布

deryabuder

最新推荐文章于 2025-07-10 13:24:12 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/sinat_31900531/article/details/89289676

Vue 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何在项目中配置Element-ui，包括完整引入和按需引入两种方式。完整引入需要执行npm i element-ui -S并在main.js中导入。按需引入需安装相关依赖，修改配置，并在main.js中指定引入组件，同时解决可能遇到的错误，如缺少preset、依赖未找到以及Select组件问题。

官方文档： http://element-cn.eleme.io/#/zh-CN/component/installation

一、完整引入

1. 在项目目录下执行：npm i element-ui -S

2. 在main.js中写入

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

Vue.use(ElementUI)

3. 直接在组件中用

element-ui提供的组件名以el-开头

二、按需引入

我们可以只引入需要的组件，以达到减小项目体积的目的。

1. 安装包

npm i element-ui -S
npm install babel-plugin-component -D

2. 然后，将 .babelrc 修改为：
注意官方文档此处有坑，以下提供完整配置

把vue-cli构建的项目默认的：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

改为：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] }
    }],
    ["es2015", { "modules": false }], "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    [
      "component", {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3. 在main.js组件中加入：

import { Button, Select } from 'element-ui';
// 官网的例子没有引入样式，但是不引入，就没有样式
import 'element-ui/lib/theme-chalk/index.css' 

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

5. 错误处理

① 如果报错： Module build failed: Error: Couldn't find preset "es2015" relative to directory（遇到了）

则执行：npm install babel-preset-es2015 --save-dev

② 报错：These dependencies were not found:deepmerge,resize-observer-polyfill ,throttle-debounce/debounce（没遇到）

则执行：npm install --save deepmerge resize-observer-polyfill throttle-debounce/debounce

③ 按需引入时，Select组件不显示下拉的数据，而完整引入不会遇到这个问题。（遇到了）

没有引入Option, OptionGroup组件