Detailed explanation of introducing elementUI components into vue projects

This article mainly introduces in detail how to introduce elementUI components into the vue project. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor and take a look

Prerequisite: Vue has been installed

Initialize vue

vue init webpack itemname

Run initialization demo

Run the initial demo. If there is no problem, install elementUI

npm run dev

Install elementUI

npm i element-ui -S

Introduce elementUI

Introduce in main.js elementUI

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

Test

Let’s test it

After creating the header.vue file, copy a piece of elementUI code

<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: &#39;1&#39;,
    activeIndex2: &#39;1&#39;
   };
  },
  methods: {
   handleSelect(key, keyPath) {
    console.log(key, keyPath);
   }
  }
 }
</script>

Introduce header.vue into App.vue

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

<script>
import Header from &#39;./pages/header.vue&#39;

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

<style>

</style>

Effect:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to dynamically add li tags and add attributes and bind event methods in jQuery

In Vue Use elementUI to implement custom theme methods

How to implement default style modification in elementui

The above is the detailed content of Detailed explanation of introducing elementUI components into vue projects. For more information, please follow other related articles on the PHP Chinese website!