Introduce

A tool that makes it easier for you to use element

What did we do

No longer need to inject element components with import and components, you can coding like this

<template>
  <div class="home">
    <el-carousel :interval="4000" type="card" height="750px">
      <el-carousel-item v-for="item in imgList" :key="item">
        <img :src="item" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld,
  },
  data() {
    return {
      imgList: []
    }
  },
}
</script>

How To Use

Make sure you downloaded the el-loader package then You need to configure it in the vue.config.js like this

module.exports = {
  ...
  chainWebpack: (config) => {
    config.module.rule('vue')
    .use('el-loader')
    .loader('el-loader')
    .end();
  },
}

Thats All! Have Fun