详解如何在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 相关文章推荐
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
理解JavaScript原型链
Oct 25 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 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
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
domReady的实现案例
2016/11/23 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python中列表的一些基本操作知识汇总
2015/05/20 Python
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
暑期实习鉴定
2013/12/16 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
党员身份证明材料
2015/06/19 职场文书
餐馆开业致辞
2015/08/01 职场文书
Pandas自定义选项option设置
2021/07/25 Python
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫
Golang日志包的使用
2022/04/20 Golang