ElementUI的使用
一、安装
1、安装
在项目目录下执行
npm i element-ui -S
2、引入
在 main.js 中写入以下内容:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; #样式文件单独引入 Vue.use(ElementUI); #全局注册
#ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf 此时需要在配置文件webpack.config.js中将缺少的文件后缀名补全
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
运行时可能出现错误
二、使用
现在假设引入一个导航栏,在Vheader组件中引入导航栏代码
<template>
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="">公司介绍</el-menu-item>
<el-menu-item index="" >产品管理</el-menu-item>
<el-menu-item index=""><a href="" target="_blank">公司文化</a></el-menu-item>
</el-menu>
</template>
<script>
export default {
name: "Vheader",
data:function () {
return {
// activeIndex: '',
activeIndex2: '' //标题下变颜色
}
},
methods:{
//在当前组件内调用
}
,
computed:{
//在在当前组件内调用
}
}
</script>
<style scoped>
/*设置scoped,只对当前组件样式起作用*/
</style>

此时页面就可以显示引入的导航了:
ElementUI的使用的更多相关文章
- Element-ui,Mint-ui
style-loader css-loader style!css 饿了么团队开源一个基于vue 组件库 elementUI PC MintUI 移动端 官网: http://element.elem ...
- Vue2.0 + Element-UI + WebAPI实践:简易个人记账系统
最近正在学习Vue2.0相关知识,正好近期饿了么桌面端组件Element-UI发布,便动手做了一款简易个人记账系统,以达到实践及巩固目的. 1.开发环境 Win10 + VS2015 + Sqlser ...
- Vue + element-ui
在Vue-cli生成的项目中使用 element-ui,按照官方的指导 npm i element-ui -D 执行之后,查看package.json,element-ui 加在了 "dev ...
- vue2.0+elementUI构建单页面后台管理平台
git:https://github.com/reg21st/vue2-management-platform 访问:https://reg21st.github.io/vue2-management ...
- Vuejs实例-02Vue.js项目集成ElementUI
Vuejs实例-02Vue.js项目集成ElementUI 0:前言 vue.js的UI组件库,在git上有多个项目,我见的使用者比较多的是iView和Element.两个组件库,组件都很丰富. 官网 ...
- 解决element-ui 中upload组件使用多个时无法绑定对应的元素
问题场景 我们在一个列表中分别都需要有upload组件的时候也就涉及到了多个upload同时存在: 因为一般可以在success回调中拿到上传成功的图片已经成功的response,多个也可以,这个没毛 ...
- 修改ElementUI源码实践
提要 Vue2.0+Vuex+ElementUI是现在很多项目都在使用的BS软件的开发组合. Vue相较于Angular具有学习成本低,上手快以及组件轻量化的特点:相较于React,其官方提供的很多指 ...
- element-ui更换主题色
1.cd到你的项目文件目录下,npm i element-theme -g 2.npm i element-theme-default -D 3.et -i 执行后当前目录会有一个 element-v ...
- Element-ui Theme浅析
一.浅析 1.采用BEM方式管理类名 B:block,模块,一个块是一个独立的实体,块可以包含其它块,名字单词间用-连接:如一个搜索块: E:element,元素,一个元素是块的一部分,具有某种功能, ...
- 基于ElementUI的网站换主题的一些思考与实现
前言 web应用程序,切换主题,给其换肤,是一个比较常见的需求. 如何能快速的切换主题色?(只有固定的一种皮肤) 如果又想把主题色切换为以前的呢?(有多种可切换的皮肤) 该以何种方式编写标签的css属 ...
随机推荐
- IDEA中将工程打包成war包及部署到Tomcat流程
工程打包成war包及部署到Tomcat流程 再IDEA开发工具中,将工程打包成war包流程: 父pom里需要移除内置的tomcat <dependency> <groupId> ...
- RK3288 GPIO控制
参考: https://blog.csdn.net/kris_fei/article/details/69553422
- Cloudflare-为自己的网站&博客保驾护航
官网: https://www.cloudflare.com/zh-cn/ Cloudflare是什么? 优化功能,提升网站性能,提供SSL服务,提供安全防护,托管服务:为企业,非营利组织,博客等提供 ...
- dill:解决python的“AttributeError: Can't pickle local object”及无法pickle lambda函数的问题
python的pickle是用来序列化对象很方便的工具,但是pickle对传入对象的要求是不能是内部类,也不能是lambda函数. 比如尝试pickle这个内部类: 结果会报错AttributeErr ...
- CSIC_716_20191225【HTML基础入门】
HTTP协议 超文本传输协议HyperText Transfer Protocol 四大特性: 1.一次请求一次响应 2.基于TCP/IP协议,作用于应用层 3.无状态 4.无连接 数据格式: 1.请 ...
- Jenkins应用
转自 https://www.cnblogs.com/syw20170419/category/1239520.html Jenkins+Git+Python 进行持续集成接口测试 https://w ...
- PHP ftp_close() 函数
定义和用法 ftp_close() 函数关闭 FTP 连接. 语法 ftp_close(ftp_connection) 参数 描述 ftp_connection 必需.规定要关闭的 FTP 连接. 实 ...
- BZOJ 3159: 决战 解题报告
BZOJ 3159: 决战 1 sec 512MB 题意: 给你一颗\(n\)个点,初始点权为\(0\)的有跟树,要求支持 Increase x y w 将路径\(x\)到\(y\)所有点点权加上\( ...
- ueditor不能上传mp4格式的视频--解决方案
1.ueditor.all.js 去掉所有的 type="application/x-shockwave-flash" 2.ueditor.all.min.js 去掉所有的 typ ...
- [参考]C# JSON字符串序列化与反序列化
C#将对象序列化成JSON字符串 public string GetJsonString() { List<Product> products = new List<Product& ...