Rumah > hujung hadapan web > tutorial js > 详解解读在vue项目中引入elementUI组件

详解解读在vue项目中引入elementUI组件

亚连
Lepaskan: 2018-06-06 10:37:48
asal
2230 orang telah melayarinya

这篇文章主要介绍了详解如何在vue项目中引入elementUI组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

前提:已经安装好Vue

初始化vue

vue init webpack itemname
Salin selepas log masuk

运行初始化demo

运行一下初始后的demo,如果没有问题则进行安装elementUI

npm run dev
Salin selepas log masuk

安装 elementUI

npm i element-ui -S
Salin selepas log masuk

引入elementUI

在main.js中引入elementUI

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

测试

下面我们来测试一下

在创建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>
Salin selepas log masuk

在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>
Salin selepas log masuk

效果:

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在jQuery中如何实现动态添加li标签并添加属性和绑定事件方法

在Vue中使用elementUI实现自定义主题方法

在elementui中如何实现默认样式修改

Atas ialah kandungan terperinci 详解解读在vue项目中引入elementUI组件. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan