前端学习(2183):tabber--基本架构的构建

app.vue

<template><div id="app"><div id="tab"><div class="tab-bar-item">首页</div><div class="tab-bar-item">分类</div><div class="tab-bar-item">购物车</div><div class="tab-bar-item">我的</div></div></div>
</template><script>
export default {name: 'App'
}
</script><style>
@import "./assets/css/style.css"#tab {display:flex;background-color:#f6f6f6;position:fixed;left:0;right:0;bottom:0;
}
.tab-bar-item{flex:1;text-align:center;height:49px;
}
</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld}]
})

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

style.css

body {padding: 0;margin: 0;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/417664.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

拦截器 过滤器 监听器 的区别

面试的时候突然被问了这么个问题 本来知道点啥的 脑子一热 啥也没说出来总结一下 以下内容均摘自网络 但是 读完之后 应该会对它们有更清晰的认识。1.1 什么是拦截器&#xff1a; 拦截器&#xff0c;在AOP&#xff08;Aspect-Oriented Programming&#xff09;中用于在某…

我是服务的执政官-服务发现和注册工具consul简介

服务发现和注册 我们有了两个服务。服务A的IP地址是192.168.0.1&#xff0c;端口9001,服务B的IP地址192.168.0.2&#xff0c;端口9002。我们的客户端需要调用服务A和服务B&#xff0c;我们只需要在配置文件中写上服务A和服务B的IP地址即可。 此时&#xff0c;服务A的服务器负载…

什么linux系统是中文的,什么是Linux系统

Linux系统是一种类似Unix的开源和社区开发的操作系统&#xff0c;适用于计算机&#xff0c;服务器&#xff0c;大型机&#xff0c;移动设备和嵌入式设备&#xff0c;已成为最广泛支持的操作系统之一&#xff0c;接下来在文章中将为大家详细介绍什么是Linux【推荐课程&#xff1…

numpy将所有数据变为0和1_Numpy库学习

之前照着《利用python进行数据分析》学过一边&#xff0c;代码也跟着敲了&#xff0c;但是如果不用的话&#xff0c;印象不深&#xff0c;忘的特别快。所以&#xff0c;现在再过一遍&#xff0c;并且记录一下&#xff0c;加深印象。一、创建numpy中的多维数组对象ndarry的创建。…

win8.1 linux系统,电脑显示win8.1linux系统失效的原因及解决办法!

电脑蓝屏每次代码都不一样&#xff0c;有的是epoll或者workflow代码有的是错误码&#xff0c;会将错误进行查找&#xff0c;电脑蓝屏错误有些可以修复&#xff0c;也有错误修复不了的&#xff0c;出现蓝屏&#xff0c;最可能的原因是segmentationfault&#xff0c;出现的原因是…

数据丢失情况下应急之顶级数据恢复服务提供商列表

在当今的数字世界中&#xff0c;数据存储设备在我们的职业和个人生活中发挥着非常重要的作用。 无论是硬盘驱动器上的重要专业文档、USB 闪存驱动器上的医疗数据还是外部硬盘驱动器上的照片和视频&#xff0c;我们都将重要信息存储在一个或另一个数据存储设备上。我们认为数据…

jsencrypt加密同一值返回不同密文_密码学原语如何应用?解析密文同态性的妙用...

免责声明&#xff1a;本文旨在传递更多市场信息&#xff0c;不构成任何投资建议。文章仅代表作者观点&#xff0c;不代表火星财经官方立场。小编&#xff1a;记得关注哦来源&#xff1a;微众银行区块链隐私数据在密文形式下是否依旧可以加减乘除&#xff1f;其背后的同态性原理…

小红帽怎样装图形化界面_纯技术篇:U盘装系统,不再多花冤枉钱

U盘装系统&#xff0c;顾名思义就是用U盘安装电脑的操作系统。这里小编用现在最常见的大白菜装机软件来开始教程。1、使用大白菜装机版制作大白菜U盘启动盘之前&#xff0c;需要准备一个存储空间大于2G的U盘。2、下载并且安装好大白菜装机版&#xff0c;打开安装好的大白菜装机…

北斗三号b1c频点带宽_重磅北斗星通新一代22nm北斗高精度定位芯片正式发布

11月23日&#xff0c;第十一届中国卫星导航年会在四川省成都市盛大召开。年会首日&#xff0c;北斗星通旗下企业和芯星通正式发布了最新一代全系统全频厘米级高精度GNSS芯片——和芯星云NebulasⅣ。这颗芯片代表了国内卫星导航芯片的最高水平&#xff0c;在厘米级高精度定位领域…

为什么人会摆高姿态_为什么感情相处中不要随意掏心掏肺?

如今已经到了十二月份&#xff0c;过年的时间一点一点推进&#xff0c;在这个冬天你这一年的感悟有多少&#xff1f;这一年过得还快乐吗&#xff1f;可能有人在这一年遇到了自己的另一半&#xff0c;彼此陪伴走过四季&#xff0c;沉浸在爱情的蜜罐里&#xff0c;感受荷尔蒙碰撞…

hadoop 2.7.2 + zookeeper 高可用集群部署

一&#xff0e;环境说明 虚拟机&#xff1a;vmware 11 操作系统&#xff1a;Ubuntu 16.04 Hadoop版本&#xff1a;2.7.2 Zookeeper版本&#xff1a;3.4.9 二&#xff0e;节点部署说明 三&#xff0e;Hosts增加配置 sudo gedit /etc/hosts wxzz-pc、wxzz-pc0、wxzz-pc1、wxzz-pc…