一、首頁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 styles
  import ‘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-icons
git 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 練習記錄