vue.js模板模板的使用（仿饿了么布局)

使用模板实现如下页面（仿饿了么布局)

如上图。使用了四个组件，分别是header.vue，goods.vue，ratings.vue，seller.vue

header.vue代码如下

模板div class='header '我是页眉头部/div/模板脚本类型='text/ecmascript-6 '导出默认值{ };/scriptstyle lang="手写笔" rel="样式表/手写笔"。页眉颜色： # fff背景： rgba(7，17，27，0.5)文字-对齐：中心高度：40 px行高：40 px/样式商品。某视频剪辑软件的代码如下，其他两个类似模板' div class='货物'我是商品组件/div/模板脚本类型='text/ecmascript-6 '导出默认值{ };/scriptstyle lang='手写笔rel='样式表/手写笔/style在App.vue文件中，我们使用到了路由器链路标签和路由器视图

代码如下

模板div id='app '！-头部组件-v-header/v-header div class=' tab border-1px ' div class=' tab-item ' router-link to='/goods/goods '商品/router-link/div class=' tab-item ' router-link to='/rates/rates '评价/路由器-链接/div class=' tab-item '路由器-链接到='/卖家/卖家'商家/router-link /div /div！-保持活力：缓存所有的页面，防止重复渲染DOM -保持活动路由器-视图/路由器-视图/保持活动/div/模板脚本类型='text/ecmascript-6' //引人组件从" @/组件/标头/标头"导入标头；导出默认{ components : { ' v-header ' : header } }；/scriptstyle lang='手写笔rel='样式表/手写笔@ import./common/styl/mixin。styl '；选项卡显示： flex宽度：100%高度：40 px行高：40 px边框-1px(rgba(7，17，27，0.1))。tab-item flex :1文本对齐：居中a显示：块字体粗细：700文字装饰：一个字体大小：14像素颜色： RGB(77，85，93).活动颜色：黄色黄色/styleindex.js中这样写

从“Vue”导入Vue从“vue路由器”导入VueRouter从“vue-resource”导入VueResource//引入自定义的组件从"@/组件/货物/货物"进口货物；从"@/组件/评级/评级"导入评级；从"@/组件/卖家/卖家"导入卖家；vue。使用(VueRouter)；vue。使用(VueResource)；const routers=[{ path : '/goods/goods '，name:'goods '，component:Goods }，{ path:'/ratings/ratings '，name:'ratings '，component:Ratings }，{ path : '/卖家/卖家，名称为： '卖家，组件3360卖家}]；const router=new VueRouter({ mode : ' history '，//如果不配置模式，就会使用默认的混杂模式，该模式下会将路径格式化为#!开头路由器：路由器，链接活动类："活动"//设置链接激活时使用的半铸钢钢性铸铁(铸造半钢)类名，默认值： '路由器-链路-活动' });导出默认路由器；总结

以上所述是小编给大家介绍的vue.js模板模板的使用（仿饿了么布局),希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！