Vue 프로젝트에 elementUI 구성 요소를 도입하는 방법에 대한 자세한 설명

이 글은 주로 vue 프로젝트에 elementUI 컴포넌트를 도입하는 방법을 자세히 소개한 것입니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 여러분과 공유하고 참고하겠습니다. 전제 조건: Vue가 설치되어 있습니다

Initialize 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에서 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>

효과:

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

jQuery에서 동적으로 li 태그를 추가하고 속성을 추가하고 이벤트 메서드를 바인딩하는 방법

elementUI를 사용하여 Vue에서 사용자 정의 테마 메서드를 구현하는 방법

elementui 수정에서 기본 스타일을 구현하는 방법

위 내용은 Vue 프로젝트에 elementUI 구성 요소를 도입하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!