详解如何在vue项目中引入elementUI组件
更新时间:2018年02月11日 09:54:19 作者:Mr_houzi
这篇文章主要介绍了详解如何在vue项目中引入elementUI组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
前提:已经安装好Vue
初始化vue
vue init webpack itemname
运行初始化demo
运行一下初始后的demo,如果没有问题则进行安装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)
测试
下面我们来测试一下
在创建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: '1', activeIndex2: '1' }; }, methods: { handleSelect(key, keyPath) { console.log(key, keyPath); } } } </script>
在App.vue中引入header.vue
<template> <div id="app"> <Header></Header> </div> </template> <script> import Header from './pages/header.vue' export default { components:{ Header, } } </script> <style> </style>
效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
详解mpvue中使用vant时需要注意的onChange事件的坑
这篇文章主要介绍了详解mpvue中使用vant时需要注意的onChange事件的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-05-05vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
这篇文章主要介绍了vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量) ,需要的朋友可以参考下2018-04-04
最新评论