Vue仿一個上家公司WAP端給大佬們批閱

時間 2019-11-05

標籤 vue 一個上家公司 wap 大佬批閱欄目 HTML 简体版

原文原文鏈接

前言：給批閱的大佬們敬上

1、項目效果

1.主頁

2.城市選擇

3.打包上線代碼

2、項目實戰

1.項目簡介

Iconfont 的引入和使用
圖片輪播組件的使用
Axios 獲取接口數據
組件間數據傳遞
字母表佈局
使用FastClick處理移動端延遲
函數節流與防止性能優化
LocalStorage 緩存選擇城市
Vuex 實現城市數據共享
Keep-alive 性能優化

2.使用技術點

Vue + Vue-router + Vue-cli + Axios + Vue-awesome-swiper + Stylus + Flex佈局 + ES6 + Eslint + Webpack

3.相關npm依賴包

npm install vue-awesome-swiper@2.6.7 --save
npm install -g stylus
npm install fastclick --save
npm install axios -S
複製代碼

3、知識點回顧L

1.使用v-show實現更多按鈕的展開收起，transform實現箭頭旋轉

.arrow1 {
    font-size: .24rem;
    transform: rotate(180deg);
}
複製代碼

(推薦閱讀一篇CSS文章)

2.根據汽車Logo構建多頁切換功能

computed: {
  pages () {
    const pages = []
    this.iconsList.forEach((item, index) => {
      const page = Math.floor(index / 8)
      if (!pages[page]) {
        pages[page] = []
      }
      pages[page].push(item)
    })
    return pages
  }
}
複製代碼

(推薦閱讀一篇算法文章)

3.使用mock數據，開發環境代理

在config文件夾下設置index.js
在module.exports文件中dev的proxyTable設置

proxyTable: {
  '/api': {
    target: 'http://localhost:8080',
    pathRewrite: {
      '^/api': '/static/mock'
    }
  }
}
複製代碼

(推薦閱讀一篇webpack文章)

4.因爲只有大中國市級數據，城市選擇採用這種展現更合理

上半部分爲字母指引
下半部分爲選擇字母城市聯動
城市數據多的，推薦better-scroll，並更換展現形式

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'
Vue.use(Router)

export default new Router({
  routes: [{
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/city',
      name: 'City',
      component: City
    }]
})
複製代碼

(推薦閱讀一篇vue組件庫文章)

5.使用 Vuex 實現數據共享

建立store文件夾，新建index.js，state 裏放置全局公用數據city

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    city: '深圳'
  },
  mutations: {
    changeCity (state, city) {
      state.city = city
    }
  }
})
複製代碼

在main.js的根實例下，將store傳遞進去。

import store from './store'  //引入 store

new Vue({
  el: '#app',
  router: router,
  store: store,  //傳遞進入根實例的 store
  components: { App },
  template: '<App/>'
})
複製代碼

Vuex的commit方法(觸發事件)和Vue-router的push方法(頁面跳轉)

methods: {
  handleCityClick (city) {
    this.$store.commit('changeCity', city)
    this.$router.push('/')
  }
}
複製代碼

LocalStorage 實現城市緩存

export default new Vuex.Store({
  state: {
    city: localStorage.city || '深圳'
  },
  mutations: {
    changeCity (state, city) {
      state.city = city
      localStorage.city = city
    }
  }
})
複製代碼

當用戶禁用 localStorage，會致使瀏覽器報錯，建議使用try catch進行優化

let defalutCity = '深圳'
try {
  if (localStorage.city) {
    defaultCity = localStorage.city
  }
} catch (e) {}

export default new Vuex.Store({
  state: {
    city: defaultCity
  },
  mutations: {
    changeCity (state, city) {
      state.city = city
      try {
        localStorage.city = city
      } catch (e) {}
    }
  }
})
複製代碼

(推薦閱讀一篇vuex文章)

6.Keep-alive結合activated生命週期鉤子進行Ajax請求的優化

城市不變，汽車資訊不變

7.優化

低版本瀏覽器白屏

npm install babel-polyfill --save
複製代碼

每次作路由切換時，讓新顯示的頁面回到最頂部。
異步組件拆分，按需加載。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/pages/home/Home.vue')
    }, {
      path: '/city',
      name: 'City',
      component: () => import('@/pages/city/City.vue')
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})
複製代碼