按需引入element-ui找不到.babelrc

在开发过程中我们可以通过按需引入的方式引入所需要的组件，以达到减小项目体积的目的：

步骤一：使用babel-plugin-component插件。

运行命令行

npm install babel-plugin-component -D

2、修改babel.config.js文件

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

3、为了方便管理，建议在src文件夹下创建element-ui文件夹，并在里面创建index.js文件配置需要的组件。

import { Button, Option, Select, Switch, MessageBox, Message } from 'element-ui'
const element = {
    install: function(Vue) {
        Vue.use(Button)
        Vue.use(Switch)
        Vue.use(Select)
        Vue.use(Option)
       	// 往vue实例原型里添加消息提示，方便全局调用
        Vue.prototype.$msgbox = MessageBox
        Vue.prototype.$alert = MessageBox.alert
        Vue.prototype.$confirm = MessageBox.confirm
        Vue.prototype.$message = Message
        //使用：this.$message('这是一条消息提示');
    }
}
export default element

4、在 main.js 中引入组件

//element-ui样式引入
import 'element-ui/lib/theme-chalk/index.css'
//element-ui文件夹下
import element from './element-ui/index'
Vue.use(element)

测试事例：

<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else
           class="host-body">
        <el-select v-model="value"
                   placeholder="请选择">
          <el-option v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: true,
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    };
  },
  components: {

  },
  mounted () {

    this.cancelLoading();
  },
  methods: {

    cancelLoading () {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    }
  }
};
</script>

<style lang="scss">
@import "../assets/scss/index.scss";
</style>