博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue+node+mongoDB 火车票H5(四)---完成静态页面
阅读量:5306 次
发布时间:2019-06-14

本文共 1001 字,大约阅读时间需要 3 分钟。

各项配置都好了,就可以开始写静态页面了,先别急着写,看一下页面又哪些公用的部分可以提取出来的,统一放到components组件文件夹中

header头部文件夹放一些头部常用组件,如首页的banner切换封装一个swiper组件,tab切换封装一个tab组件,头部的标题封装一个vHeader组件

footer底部文件加放一些页面底部常用组件,如首页的菜单menu组件,列表页的筛选filter组件

另外,注意每新建一个页面一定要到router里的index.js中去配置,例如,添加了index.vue和train-list.vue两个文件。则

import Vue from 'vue'import Router from 'vue-router'import trainQuery from '@/page/index'import trainList from '@/page/train-list'Vue.use(Router)export default new Router({   // mode:'history', //去掉#/这个去掉貌似会出现问题,还是不去掉吧  routes: [    {path: '/',name: 'trainQuery',component: trainQuery},    {path: '/trainList',name: 'trainList',component: trainList}  ]})

如果想要访问train-list.vue页面,直接在浏览器后加/trainList就可以访问了

静态页面中很多组件都可以利用vux中已有的组件来写会比较方便,另外,页面中经常会用到一些图标,全局引入直接在index.html里用<link>标签引入font-awesome,一些font-awesome没有的图标就放在img文件夹中使用

这是目前粗略完成的静态页:

项目地址: https://github.com/leitingting08/train

 

 继续搭建静态页面,静态页面完成之后再做其他的,vux ui框架的使用能提高开发效率,vux官网https://vux.li/#/zh-CN/README,例子demo都很清楚,熟悉使用很快

转载于:https://www.cnblogs.com/leiting/p/8053029.html

你可能感兴趣的文章
匈牙利算法 cogs 886. [USACO 4.2] 完美的牛栏
查看>>
Fragment之一:Fragment入门
查看>>
服务器启动完成执行定时任务Timer,TimerTask
查看>>
windows下编译安装BOOST
查看>>
Cookie安全测试
查看>>
数据结构C语言版车牌号的查询与排序
查看>>
Centos 5 忘记root密码,可以使用单用户模式修改密码
查看>>
WIN7 64位系统安装JDK并配置环境变量
查看>>
Altera DDR2 IP核学习总结2-----------DDR2 IP核的生成
查看>>
baidu patchrom项目 内存溢出解决方法
查看>>
简单的C#TCP协议收发数据示例
查看>>
labview图形和图表的类型
查看>>
Android 缓存
查看>>
[bzoj1910] [Ctsc2002] Award 颁奖典礼
查看>>
【科普】电池容量相同 为何笔记本电池的体积比手机大得多
查看>>
UEFI引导模式
查看>>
POJ3070 矩阵快速幂模板
查看>>
spring boot实现ssm(2)功能
查看>>
以最小代价解决同一apk不同资源定制共存问题
查看>>
第四代iPhone电池仍然不可以更换(转)
查看>>