Foreword: to mark the big guy respectfully

I. Project effect

1. The home page

2. City selection

3. Pack up the live code

Ii. Actual combat of the project

1. Project Introduction

  • Introduction and use of Iconfont
  • The use of picture rotation components
  • Axios gets the interface data
  • Data transfer between components
  • Alphabet layout
  • Use FastClick to handle mobile latency
  • Function throttling with prevention of performance optimization
  • LocalStorage cache selects the city
  • Vuex implements urban data sharing
  • Keep-alive performance optimization

2. Use technical points

  • Vue + vue-Router + VUe-CLI + Axios + VUE-awesome -swiper + Stylus + Flex layout + ES6 + Eslint + Webpack

3. Related NPM dependency packages

NPM install [email protected] --save NPM install -g stylus NPM install fastclick --save NPM install axios-sCopy the code

Three, knowledge point review L

1. Use V-show to expand and fold more buttons and transform to rotate arrows

.arrow1 {
    font-size: .24rem;
    transform: rotate(180deg);
}
Copy the code

(A CSS article is recommended.)

2. Build multi-page switching function according to the Logo of the car

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
  }
}
Copy the code

(Reading an algorithm article is recommended)

3. Use mock data to develop environment proxies

  • Set index.js in the config folder
  • Dev’s proxyTable setup in module.exports file
proxyTable: {
  '/api': {
    target: 'http://localhost:8080',
    pathRewrite: {
      '^/api': '/static/mock'}}}Copy the code

(A Webpack article is recommended.)

4. It is more reasonable for cities to choose this kind of presentation, since only the greater China municipal data are available

  • The upper part is a letter guide
  • The lower part is to select the letter city linkage
  • If there is a lot of urban data, better scroll is recommended and the display form should be changed
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
    }]
})
Copy the code

(Reading the vUE component library article is recommended.)

5. Use Vuex to share data

  • Create a store folder, create index.js, and place the global public data city in state
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    city: 'shenzhen'
  },
  mutations: {
    changeCity (state, city) {
      state.city = city
    }
  }
})
Copy the code
  • In the root instance of main.js, pass store in.
import store from './store'// Store new Vue({el:'#app'Router: router, store: store, // Pass to the root instance store Components: {App}, template:'<App/>'
})
Copy the code
  • Vuex’s Commit method (triggering events) and VuE-Router’s push method (page jumps)
methods: {
  handleCityClick (city) {
    this.$store.commit('changeCity', city)
    this.$router.push('/')}}Copy the code
  • LocalStorage implements city caching
export default new Vuex.Store({
  state: {
    city: localStorage.city || 'shenzhen'
  },
  mutations: {
    changeCity (state, city) {
      state.city = city
      localStorage.city = city
    }
  }
})
Copy the code
  • If localStorage is disabled, an error message is displayed on the browser. You are advised to use try catch for optimization
let defalutCity = 'shenzhen'
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) {}
    }
  }
})
Copy the code

(A Vuex article is recommended)

6.Keep-alive and Activated lifecycle hooks are used to optimize Ajax requests

  • The city does not change, the car information does not change

7. To optimize

  • A blank screen is displayed on the browser of an earlier version
npm install babel-polyfill --save
Copy the code
  • Each time you do a route switch, bring the new page back to the top.
  • Asynchronous components are split and loaded on demand.
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 }
  }
})
Copy the code

(A performance tuning article is recommended.)

8. Pack and go online

npm run build
Copy the code

Three, for the front end regardless of personal danger duck!

Four, notice (the next intermediate chapter is more exciting, we will be there or square oh!

V. Concluding remarks

Interview build carrier, work screw, I will continue to update.

This is my wechat official account, welcome to follow!