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


Posted in Javascript onFebruary 11, 2018

前提:已经安装好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>

效果:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之可拖动的iframe效果代码
Aug 01 Javascript
js 图片缩放(按比例)控制代码
May 27 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
js实现列表按字母排序
Aug 11 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 #Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 #Javascript
使用vue-router设置每个页面的title方法
Feb 11 #Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 #Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 #Javascript
vue.js,ajax渲染页面的实例
Feb 11 #Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 #Javascript
You might like
封装一个PDO数据库操作类代码
2009/09/09 PHP
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
[原创]图片分页查看
2006/08/28 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
实例讲解Python中的私有属性
2014/08/21 Python
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
大三自我鉴定范文
2013/10/05 职场文书
建筑工程管理专业自荐信范文
2013/12/28 职场文书
委托证明书
2014/09/17 职场文书
工作感言一句话
2015/08/01 职场文书
学会感恩主题班会
2015/08/12 职场文书
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python
Python实现聚类K-means算法详解
2022/07/15 Python