Detaillierte Erläuterung der Einführung von elementUI-Komponenten in Vue-Projekte

In diesem Artikel wird hauptsächlich detailliert beschrieben, wie elementUI-Komponenten in Vue-Projekte eingeführt werden. Der Herausgeber findet es ziemlich gut. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben. Folgen wir dem Editor, um einen Blick darauf zu werfen

Voraussetzung: Vue wurde installiert

Vue initialisieren

vue init webpack itemname

Führen Sie die Initialisierungsdemo aus

Führen Sie die erste Demo aus. Wenn es kein Problem gibt, installieren Sie elementUI

npm run dev

Installieren Sie elementUI

npm i element-ui -S

Führen Sie elementUI ein

Führen Sie es in main.js ein elementUI

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

Testen

Lass es uns testen

Kopieren Sie nach dem Erstellen der Datei header.vue einen Teil des elementUI-Codes

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

Header.vue in App.vue einführen

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

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

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

<style>

</style>

Wirkung:

Das Obige ist das, was ich für alle zusammengestellt habe. Ich hoffe, es wird für alle hilfreich sein in der Zukunft.

Verwandte Artikel:

So fügen Sie dynamisch Li-Tags hinzu, fügen Attribute hinzu und binden Ereignismethoden in jQuery

in Vue Verwenden Sie elementUI, um Implementieren Sie benutzerdefinierte Designmethoden

So implementieren Sie Standardstiländerungen in elementui

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Einführung von elementUI-Komponenten in Vue-Projekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!