vue+vux 仿飛豬app火車票部分（四）

標籤：分享圖片   port   組件   全域   檔案   標籤   img   比較   tps   

各項配置都好了，就可以開始寫靜態頁面了，先別急著寫，看一下頁面又哪些公用的部分可以提取出來的，統一放到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檔案夾中使用

這是目前我粗略完成的靜態頁，後面再慢慢調整

 

 繼續搭建靜態頁面，靜態頁面完成之後再做其他的，vux ui架構的使用能提高開發效率，vux官網https://vux.li/#/zh-CN/README，例子demo都很清楚，熟悉使用很快

vue+vux 仿飛豬app火車票部分（四）