概述
- vue進階練習
- 基於vue-cli 3.0腳手架構建的
- 仿貓眼webapp
- github地址：https://github.com/santana2000/hah-movie
界面展示
項目結構
- 頁面結構主要分爲頁面級組件和通用組件，頁面級的主要用於底部欄切換不同頁面，通用組件有頂部欄、底部欄和滑動組件等
- 路由新建了一個文件夾，每個頁面的路由分開寫，以模塊形式導出，彙總在一個文件中引用，以免頁面過多時路由文件混亂
- 通用的css文件放在public文件夾中和index.html同級
- 字體圖標放在assets文件夾中
- App.vue中只寫頂級路由插座，渲染內容
功能彙總
- Flex佈局，使用阿里字體圖標庫
- 城市列表：本地存儲
- 城市切換：狀態管理
- 城市索引：offsetTop + scrollTop
- 接口數據獲取：axios
- 數據格式預處理：過濾器
- 二級菜單：子路由
- 詳情頁：命名視圖 + 動態路由
- 搜索頁面：函數防抖
- 滑動效果：better-scroll插件
- 反向代理：新增vue.config.js解決跨域