欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-16 12:50:57
...

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

步骤一:使用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文件配置需要的组件。

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

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>

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