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