How to introduce elementUI components vue project

Synchronous personal blog article https: //mr-houzi.com/2018/02 / ...

Prerequisite: Vue already installed

Initialization vue

vue init webpack itemname

Run the initialization demo

After the initial run the demo, if there is no problem to install itelementUI

npm run dev

Installation elementUI

npm i element-ui -S

Introduced elementUI

In main.jsthe introduction of theelementUI

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

test

Let's test

Creating a header.vuefile, copy a elementUIcode

<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>

In App.vuethe introduction of theheader.vue

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

<script>
import Header from './pages/header.vue'

export default {
  components:{
    Header,
  }
}
</script>

<style>

</style>

effect: