引入elementUI元件

第一：安裝elementUI

npm i element-ui -S
注：已經安裝淘寶映象的可以把npm換成cnpm

第二：引入elementUI

**在main.js中引入elementUI**
**注：main.js代表全域性**

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});
 

第三：使用

建立header.vue檔案，複製一段elementUI的程式碼

<template>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
 

      active-text-color="#ffd04b">
      <el-menu-item index="1">處理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作臺</template>
        <el-menu-item index="2-1">選項1</el-menu-item>
 

        <el-menu-item index="2-2">選項2</el-menu-item>
        <el-menu-item index="2-3">選項3</el-menu-item>
      </el-submenu>
      <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">訂單管理</a></el-menu-item>
    </el-menu>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

在App.vue中引入header.vue

<template>
  <div id="app">
    <Header></Header>
  </div>
</template>

<script>
	import Header from './pages/header.vue'
	
	export default {
	  components:{
	    Header,
	  }
	}
</script>

看效果：

成功！！