如何在vue项目中引入elementUI组件
个人博客同步文章 https://mr-houzi.com/2018/02/...
前提:已经安装好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组件的更多相关文章
- 如何在vue项目中引入element-ui
安装 elementUI npm install element-ui --save 引入elementUI import ElementUI from 'element-ui' import 'el ...
- 如何在Vue项目中使用Element组件
[前提] 1.安装webpack cnpm install webpack -g 2.安装vue/vue-cli cnpm install vue vue-cli -g 3.初始化vue ...
- 如何在Vue项目中引入jQuery?
假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...
- 详解如何在vue项目中引入饿了么elementUI组件
在开发的过程之中,我们也经常会使用到很多组件库:vue 常用ui组件库:https://blog.csdn.net/qq_36538012/article/details/82146649 今天具体说 ...
- Vue项目中引入ElementUI
前提:创建好的vue项目. 1.安装ElementUI 转到项目根目录,输入命令:#cnpm install element-ui --save-dev 2.在 main.js 引入并注册 impor ...
- vue项目中引入element-ui时,如何更改主题色
在我们做项目时,我们经常会遇到切换主题色的功能,下面我们就来说一下通过颜色选择器我们就能改变项目的主题颜色 代码如下: 颜色选择器所在组件: top-theme.vue内容如下: <templa ...
- 如何在vue项目中引入阿里巴巴的iconfont图库
1. 打开 http://www.iconfont.cn/ 2. 选择我们喜欢的图标,点击上面的小车,加入图标库,即右侧的购物车 3.点击购物车,点击下载代码 4.解压下载的文件夹,将文件夹复制到 a ...
- vue项目中引入Sass
Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...
- 如何在Vue项目中给路由跳转加上进度条
1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大 ...
随机推荐
- 外边距margin的叠加问题
下午在看<css禅意花园>,书中提到了外边距重叠,于是去网上搜索了一下资料. 写了一个小例子做测试.发现网上的有些总结与我的测试不符,索性就自己总结了╮(╯▽╰)╭ <!DOCTYP ...
- ubuntu上安装及使用docker
关于Docker: Docker 是一个开源项目,为开发者和系统管理员提供了一个开放的平台,在任何地方通过打包和运行应用程序作为一个轻量级的容器.Docker 在软件容器内自动部署应用程序.Docke ...
- HTML+CSS常用代码(笔记)
注释标签:对代码进行说明 <!-- 单行注释,也可以对多行文字进行注释 --> 常用格式标签 <b>加粗</b> <i>斜体</i> < ...
- PAT B1028 人口普查(20)
课本AC代码 #include <cstdio> struct person { char name[10]; int yy, mm, dd; } oldest, youngest, le ...
- php 简单的 单例模式
php单例模式简单说明 使用注意事项: 1.使用时不能用反射模式创建单例,否则会实例化一个新的对象 2.使用懒单例模式时注意线程安全问题 3.饿单例模式和懒单例模式构造方法都是 ...
- MySQL8在CentOS7上的安装
Install_CentOS7_MySQL8_binary.sh #!/bin/bash MySQL_Package=mysql-8.0.16-linux-glibc2.12-x86_64.tar.x ...
- 一键部署etcd集群
这里使用三个节点,系统版本为CentOS7 # vim deploy-etcd.sh #!/bin/bash set -x set -e #更改这里的IP, 只支持部署3个节点etcd集群 decla ...
- Jmeter之JDBC取样器(数据库增删改查)
1.将数据库的jar包存入jmeter/lib目录下 2.配置jmeter 测试计划中“添加jar包” 数据库访问配置:线程组->添加->配置原件->JDBC Connection ...
- 超链接hover切换效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta na ...
- mysql if else count 计数
select mobile,avg(total),sum(click_day*click_money),sum(click_day),count(push_status),sum(clicks),co ...