Vue项目中，element的按需引入

优点：减小项目体积，提升项目加载速度

1.首先导入element-ui

npm i element-ui -S
或者
cnpm i element-ui -S

2.创建所需文件

3. index.js文件内容

// An highlighted block
import Vue from 'vue';
//element-ui按需引入
import {
    Select,
    Option,
    OptionGroup,
    Input,
    InputNumber,
    Radio,
    Tree,
    Dialog,
    Row,
    Col,
    Checkbox,
    CheckboxButton,
    CheckboxGroup,
    Cascader,
    Switch,
    Slider,
    TimeSelect,
    TimePicker,
    DatePicker,
    Upload,
    Rate,
    ColorPicker,
    Transfer,
    Form,
    FormItem,
    Table,
    TableColumn,
    Tag,
    Button,
    Progress,
    Pagination,
    Badge,
    Avatar,
    Alert,
    Loading,
    Message,
    MessageBox,
    Notification,
    Menu,
    MenuItemGroup,
    MenuItem,
    Submenu,
    RadioGroup,
    RadioButton,
    Container,
    Aside,
    Main,
    Dropdown,
    DropdownItem,
    DropdownMenu

} from 'element-ui'
    Vue.use(Select)
    Vue.use(Option)
    Vue.use(OptionGroup)
    Vue.use(Input)
    Vue.use(InputNumber)
    Vue.use(Radio)
    Vue.use(Tree)
    Vue.use(Dialog)
    Vue.use(Row)
    Vue.use(Col)
    Vue.use(Checkbox)
    Vue.use(CheckboxButton)
    Vue.use(CheckboxGroup)
    Vue.use(Cascader)
    Vue.use(Switch)
    Vue.use(Slider)
    Vue.use(TimePicker)
    Vue.use(TimeSelect)
    Vue.use(DatePicker)
    Vue.use(Upload)
    Vue.use(Rate)
    Vue.use(ColorPicker)
    Vue.use(Transfer)
    Vue.use(Form)
    Vue.use(FormItem)
    Vue.use(Table)
    Vue.use(TableColumn)
    Vue.use(Tag)
    Vue.use(Button)
    Vue.use(Progress)
    Vue.use(Pagination)
    Vue.use(Badge)
    Vue.use(Avatar)
    Vue.use(Alert)
    Vue.use(Loading)
    Vue.use(Menu)
    Vue.use(MenuItem)
    Vue.use(MenuItemGroup)
    Vue.use(Submenu)
    Vue.use(RadioGroup)
    Vue.use(RadioButton)
    Vue.use(Container)
    Vue.use(Aside)
    Vue.use(Main),
    Vue.use(Dropdown)
    Vue.use(DropdownItem)
    Vue.use(DropdownMenu)

    Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;
    Vue.prototype.$alert = MessageBox.alert;
    Vue.prototype.$notify = Notification;

4. main.js文件引入

import element from './element/index'

5.最后就可以在其他页面直接使用了，不需要再次引入。

<template>
  <warrpTemp>
      <template slot="search">
        <el-form inline :model="numberValidateForm" ref="numberValidateForm" size="mini" label-width="50px">
          <el-form-item label="年龄" prop="age">
            <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off" clearable></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template slot="created">
        <el-button size="mini" type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
      </template>
      <template slot="btn">
         <el-button size="small" type="success">新增</el-button>
      </template>
      <template slot="table">
         <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>
      </template>
  </warrpTemp>
</template>
<script>
import warrpTemp from '../components/warrpTemp/warrpTemp.vue';
  export default{
  components: { warrpTemp },
    data(){
      return {
        value2: null,
        colors: ['#99A9BF', '#F7BA2A', '#FF9900'],  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
        value:'',
        numberValidateForm:{
          age:''
        },
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
      }
    },
    mounted(){
      // this.getColor()
    },
    methods:{
      getColor(e){
        console.log('e',e);
      },
       tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    }
  }
  
</script>
<style lang="less" scoped>
  .position_relative{
    width: 150px;
    height: 150px;
    position: relative;
    top:100px;
    left: 100px;
    background: red;
  }
  .test{
     width: 150px;
    height: 150px;
    // position: relative;
    // top:100px;
    // left: 100px;
    background: blue;
  }

  .position_absolute{
    width: 200px;
    height: 100px;
    background: orange;
    position: absolute;
    top:50%
  }
  .test2{
     width: 200px;
    height: 100px;
    background: blueviolet;
  }
  .position_fixed{
    width: 100%;
    height: 50px;
    background: aquamarine;
    position: fixed;
    top:0;
    left: 0;
  }
 .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

总结：这个例子中没有对组件再次引入，也没有注册，因为main.js中已经引入过了。按需引入体现在element下的index文件中，对需要使用的组件引入，不需要的注释就ok了！
注意：本人已经使用了很长时间了，如有问题，也可以相互讨论！