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

2018-02-17 19:16:20来源:作者:人点击

分享

前提:已经安装好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-router配合ElementUI实现导航的实例
  • 浅谈vue中改elementUI默认样式引发的static与assets的区别
  • 利用vue+elementUI实现部分引入组件的方法详解
  • Vue2.0+ElementUI实现表格翻页的实例
  • 基于Vue2.0+ElementUI实现表格翻页功能
  • Vue ElementUI之Form表单验证遇到的问题
  • vue+ElementUI实现订单页动态添加产品数据效果实例代码
  • Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
  • Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
  • Vue2.0 UI框架ElementUI使用方法详解
  • 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
  • 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台