element ui 按需引入

1、创建vue脚手架

vue create 项目名称

2、安装element ui

npm i element-ui --save

3、安装 babel-plugin-component

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

npm install babel-plugin-component -D

4、 .babelrc 文件配置

babel.config.js文件中配置

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

5、创建element文件夹

文件路径：

res>element>index.js

推荐用代码分离法，也可在main.js中直接书写

好处：分离main.js文件代码，简化代码结构，让代码更加具可读性

// 导入自己需要的组件
import { Row,Button } from "element-ui";

const element = {
  install: function (Vue) {
    Vue.use(Button);
    Vue.use(Row);
  },
};

export default element;

在main.js中进行调用js文件

import Vue from "vue";
import App from "./App.vue";
import element from "./elementui";
Vue.use(element);

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");

6、组件中使用

<template>
  <div class="home">
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>

<script>
export default {};
</script>

<style></style>

到这里成功了一大半啦~

只是一大半的原因是，样式没有出来：

finally：解决那需引入样式不出现问题

项目中使用的vue/cli脚手架版本为4.x，babel配置文件为babel.config.js

babel.config.js可以视为与.babelrc效果相同

安装依赖：

npm i @babel/preset-env -D

不再使用es2015，改成@babel/preset-env，两者都是用来编译es6语法；

res>element>index.js

代码修改如下：

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