vue プロジェクトへの elementUI コンポーネントの導入の詳細な説明

この記事では、vue プロジェクトに elementUI コンポーネントを導入する方法を主に詳しく紹介します。編集者がそれを共有し、参考にします。エディターをフォローして見てみましょう

前提条件: Vue がインストールされています

vue を初期化します

vue init webpack itemname

初期デモを実行します

初期デモを実行します 問題がなければ、elementUI をインストールします

npm run dev

elementUI をインストールします

npm i element-ui -S

elementUIを導入します

main.jsにelementUIを導入します

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

Test

テストしてみましょう

header.vueファイルを作成し、ElementUIコードの一部をコピーします

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

App.vue ヘッダーを導入します。 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>

効果:

以上は皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

jQueryでliタグを動的に追加し、属性を追加してイベントメソッドをバインドする方法

elementUIを使用してVueでカスタムテーマメソッドを実装する

elementuiにデフォルトスタイルを実装する方法

以上がvue プロジェクトへの elementUI コンポーネントの導入の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。