去旅行App 練習記錄

標籤：因此   城市   頁面切換   git merge   預設   推薦   css   default   聲明   

一、首頁Header的開發1.stylus使用

• 設計圖 750 px ，是iphone6 的2倍圖設計稿
• 使用 stylus 方便我們快速的編寫 CSS 代碼，stylus 是一種CSS預先處理語言
• npm install stylus --save
• npm install stylus-loader --save （stylus-loader 可以將 stylus 語言轉換成原生 css）
• 建立Header.vue 設定

  export default {name: ‘Home‘)

• 在Home.vue中引入

• import HomeHeader from ‘./components/Header‘

   並且聲明該局部組件

• component: {HomeHeader}

   關於樣式：使用stylus語言，只對當前組件有效

• <style lang="stylus" scpoed>

   iconfont 引入表徵圖

• 通過webpack對檔案路徑進行簡化，進入build=>webpack.base.conf.js，縮寫路徑： reslove.alias 內添加 ‘styles‘: resolve(‘src/assets/styles‘),

 

遇到的問題：

下次運行項目會遇到 stylus報錯的問題。

原因，package.json 缺失依賴，不能解析stylus

解決方案：執行 npm install stylus-loader css-loader style-loader --save

 

二、首頁輪播圖1.建立分支，在分支開發完畢會合并到master主分支上

• git pull (把線上分支拉到本地)
• git checkout index-swiper (修改本地的分支為建立的那個分支)
• git status (查看本地的分支)

2.輪播圖外掛程式外掛程式 vue-awesome-swiper

• npm install vue-awesome-swiper --save (預設最新版)

• npm install [email protected] --save (安裝穩定的版本)

• 在main.js中引入

• import Vue from ‘vue‘import VueAwesomeSwiper from ‘vue-awesome-swiper‘// require stylesimport ‘swiper/dist/css/swiper.css‘Vue.use(VueAwesomeSwiper, /* { default global options } */)

   

   

三、表徵圖地區頁面配置

　　寫樣式，此階段沒什麼痛點

四、表徵圖地區邏輯實現1. 表徵圖分類輪播效果

• 開啟 swiper.vue
• 給要滾動的組件包裹 <swiper :options="swiperOption"> 與 <swiper-slide> 標籤，一個<swiper-slide>為一頁
• 實現上下地區都能滑動，需要將.swiper-container 的寬高設定為和 .icons一樣，使用樣式穿透符 "<<<" ，可以修改不屬於本頁組件的樣式
• 關閉自動滾動參數 ：swiperOption: {autoplay: false},

2.合并線上分支

//同步線上倉庫分支git add .git commit -m ‘add icons‘git push//切換到master分支git checkout master//合并git merge origin/index-iconsgit push

 

五、推薦地區

寫樣式，此階段沒什麼痛點

 

六、Ajax 擷取首頁資料

推薦 vue-axios

整個首頁發送一個Ajax 請求

• 引入：import axios from ‘axios‘

• methods: {          getHomeInfo: function() {            axios.get(‘/api/index.json‘)              .then(this.getHomeInfoSucc)          },          getHomeInfoSucc: function() {            console.log(res)          }        },mounted () {          this.getHomeInfo()        }

   

• 整個項目中 只有static 目錄下的內容可以被外部存取到
• 進入 config/index.js  添加 proxyTable 進行api替換，可以做到線上本地api 自動切換

  proxyTable: {      ‘/api‘: {        target: ‘http://localhost:8080‘,        pathRewrite: {          ‘^/api‘:‘/static/mock‘        }      }

   

七、城市選擇頁面路由配置

better-scroll 使用

<div class="wrapper">  <ul class="content">    <li>...</li>    <li>...</li>    ...  </ul>  <!-- you can put some other DOMs here, it won‘t affect the scrolling --></div>

 

//初始化mounted () {      this.scroll = new Bscroll(this.$refs.warpper)}

 

 

遇到的問題，載入後無法滾動 ，重新整理後可滾動

情況一：

原因：當資料是動態渲染時，在沒有渲染出來的情況會視為scollBox的高度為0，因此要在渲染完成後執行 better-scroll的refresh 操作。因為此時高度因為新資料發生改變，需要重設 better-scroll 

//mounted函數    this.$nextTick(()=>{                  if (!this.scroll) {                    this.scroll = new BScroll(this.$refs.rongqi, {                      click: true                    });                  } else {                    this.scroll.refresh();                  };            });

 

情況二：

以PC模式開啟頁面，按F12後切換移動端無法滾動。

解決方案：切換移動端後，按F5 以移動端模式重新載入即可。

 

八、兄弟組件間聯動

子傳父，父傳弟的形式

 

九、使用Vuex實現資料共用

 遇到的問題：模組莫名其妙的丟失

目前解決辦法是 手動刪除 node_modules檔案夾，之後進行 npm install 重新安裝

VUEX的使用

 

十、城市儲存

localStorge本機存放區 

state: {city: localStorage.city || ‘上海‘},mutations: {    localStorage.city = city}

 

使用keep-alive 最佳化網頁效能

遇到的問題：

每次切換路由時，Ajax 都會發送請求

解決方案： 在App.vue 檔案的 <router-view>標籤外包裹一層 <keep-alive> ，下次請求時會將已儲存的內容從記憶體中取出即可，實質是不再執行mounted 周期函數

 

十一、詳情頁動態路由及 banner 布局

 

十二、公用圖片畫廊組件拆分

 

遇到的問題，

頁面拖動會互相影響 解決滾動行為

https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html

在router/index.js 檔案中 routes下面添加

scrollBehavior (to, from, savedPosition) {  return { x: 0, y: 0 }}

 

作用：每一次做頁面切換時，讓先進入的頁面X軸為0 Y軸也為0，（始終回到最頂部）

 

十三、真機測試

1. 通過 ipconfig 命令擷取本地IP （我的是 192.168.1.105:8080）
2. 進入 package.json 在 "dev" 內添加 "--host 0.0.0.0" 即可使用手機在內網訪問 

解決手機低版本瀏覽器白屏不支援 promise 的問題

• npm install babel-polyfill --save
• 在 main.js 中引入 "import ‘babel-polyfill"

十四、打包上線

前後端聯調：

修改 config/index.js 下的 proxyTable

proxyTable: {      ‘/api‘: {        target: ‘http://localhost:8080‘, //前端類比資料形式        pathRewrite: {          ‘^/api‘:‘/static/mock‘        }      }    },

 

修改為：

proxyTable: {      ‘/api‘: {        target: ‘http://localhost:80‘ //後端從80連接埠返回資料      }    },

 

 

遇到的問題：

Vue 打包後運行 index.html 網頁一片空白

解決方案：修改 config 檔案夾下的index.js

設定assetsPublicPath: ‘./‘

 

去旅行App 練習記錄