Detailed explanation of introducing elementUI components into vue projects-JS Tutorial-php.cn

Detailed explanation of introducing elementUI components into vue projects

亚连

Release： 2018-06-06 10:37:48

Original

2079 people have browsed it

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

Copy after login

Run initialization demo

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

npm run dev

Copy after login

Install elementUI

npm i element-ui -S

Copy after login

Introduce elementUI

Introduce in main.js elementUI

import ElementUI from &#39;element-ui&#39;
import &#39;element-ui/lib/theme-chalk/index.css&#39;
Vue.use(ElementUI)

Copy after login

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>

Copy after login

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>

Copy after login

Effect:

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

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!