Explication détaillée de l'introduction des composants elementUI dans les projets vue

Cet article présente principalement en détail comment introduire les composants elementUI dans les projets vue. L'éditeur pense que c'est plutôt bien. Maintenant, je vais le partager avec vous et vous donner une référence. Suivons l'éditeur pour y jeter un œil

Prérequis : Vue a été installé

Initialiser vue

vue init webpack itemname

Exécuter la démo d'initialisation

Exécutez la démo initiale, s'il n'y a pas de problème, installez elementUI

npm run dev

Installez elementUI

npm i element-ui -S

Introduisez elementUI

Introduisez elementUI dans main.js

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

Test

Testons-le ci-dessous

Créez le fichier header.vue et copiez une section d'elementUI Le 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>

introduit header.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>

dans App.vue L'effet est :

Ce qui précède. C'est ce que j'ai compilé. Pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment ajouter dynamiquement des balises li, ajouter des attributs et lier des méthodes d'événement dans jQuery

dans Vue Utilisez elementUI pour implémenter des méthodes de thème personnalisées

Comment implémenter la modification de style par défaut dans elementui

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!