npm install element-ui --save

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

//引入element-ui

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

//使用element-ui

Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  components: { App },

  template: '<App/>'

})

<template>

    <div class="hello">

        <el-tabs v-model="activeName">

            <el-tab-pane label="tab1" name="first" :key="'first'">

                    <div style="background: yellow; display: inline">

                        tab1内容

                        tab1内容

                        tab1内容

                    </div>

            </el-tab-pane>

            <el-tab-pane label="tab2" name="second" :key="'second'">

                    <div style="background: green; display: inline">

                        tab2内容

                        tab2内容

                        tab2内容

                    </div>

            </el-tab-pane>

        </el-tabs>

        <!-- 注释
　　　　　　　label：选项卡显示的title
　　　　　　　name：与选项卡绑定的activeName对应的标识符，表示选项卡的别名
　　　　　-->

    </div>

</template>

<script>

    export default {

        name: 'HelloWorld',

        data() {

            return {

                //默认第一个选项卡

                activeName: "first",

            }

        }

    }

</script>

//activeName：默认显示那个tab。
//activeName：el-tabs组件双向绑定的值，activeName值的取值是要对应el-tab-pane标记的name值