vue项目中按需引入element-ui较多时的封装

1. vue项目src目录下新建plugins文件夹，新建element.js：

// 按需引入
import {
  Button, Menu, Submenu, Input, MenuItem, MenuItemGroup, Scrollbar
} from "element-ui";


export default {
  components: [
    Button, Menu, Submenu, Input, MenuItem, MenuItemGroup, Scrollbar
  ]
}

2. plugins文件夹下新建index.js：

import Vue from "vue";
import Element from '@/plugins/element.js';

// 注册全局组件
Element.components.forEach(i => Vue.use(i));

3. main.js中引入plugins下的index.js文件：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// import { Button, Input } from 'element-ui'; // 按需引入组件
// // 注册全局组件
// Vue.component(Button.name, Button);
// Vue.component(Input.name, Input);
// /* 或写为
//  * Vue.use(Button)
//  * Vue.use(Select)
//  */
import '@/plugins';  // @/plugins为@/plugins/index.js的简写

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4. .vue页面中element-ui组件的使用：

<template>
  <div>
    <!-- <input type="text" placeholder="请输入任务"> -->
    <el-input v-model="input" placeholder="请输入内容"></el-input>
  </div>
</template>