Vue2.5 qunar App actual combat project development knowledge comb

Introduction to the

This article is a summary of the author’s qunar course through studying MOOC Vue 2.5. As the next talent, may have a lot of deficiencies, welcome to correct.

A click event 300ms delay occurs on ios on mobile terminal.

1.1 FastClick plugin introduced

npm install fastclick –save

1.2 Import and use the main.js file

import fastClick from 'fastclick'

fastClick.attach(document.body)
Copy the code

Use of stylus (expressive, dynamic, robust CSS)

2.1 the use of

<style lang="stylus" scoped>
	@import '~styles/varibles.styl'
	.parent
	  position relative
      .child
        position absolute
        background $bgColor
</style>
Copy the code

2.2 analytical

Control the relationship between upper and lower levels by indentation
Global variables are introduced with @import, called with $bgColor
Lang =”stylus” indicates stylus, scoped specifies to be used only in the current file
Stylus learning url

Three, iconfont icon use

3.1 Create icon project and add files to the development project

Add your favorite icon to your shopping cart, then add it to your project, and download it locally
Decompress the compressed file and import the following four files in the SRC /assets/styles/ folder

Eot, iconfont. SVG, iconfont. TTF, iconfont
Import iconfont. CSS in SRC /assets/ and change the URL to a local path
Import ‘styles/iconfont. CSS ‘in main.js

3.2 Use in code

<span class="iconfont">&#xe632;</span>
Copy the code

4. The meaning of @

4.1 pay attention to

@ indicates the path where SRC is located by default. You need to add ~@ in

4.2 example

import Home from '@/pages/home/Home'

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
</style>
Copy the code

4.3 develop

@resolve: {extensions: ['.js', '.vue', '.json'], alias: {'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'styles': resolve('src/assets/styles'), 'common': resolve('src/common'), } }Copy the code

Vue -awesome-swiper

5.1 introduced

NPM install --save [email protected] import VueAwesomeSwiper from 'vue-awe-swiper'  import "swiper/dist/css/swiper.css" Vue.use(VueAwesomeSwiper)Copy the code

5.2 the use of

<template>
  <div class="wrapper">
    <swiper ref="mySwiper" :options="swiperOption" v-if="showSwiper">
      <swiper-slide v-for="item of list" :key="item.id">
        <img class="swiper-image" :src="item.imgUrl" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper'.props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination'.loop: true.// The following two elements are the parent element and swiper is refreshed automatically when DOM changes
        observeParents: true.observer: true}}},computed: {
    showSwiper () {
      return this.list.length
    }
  }
}
</script>
Copy the code

5.3 Page load jitter Occurs

5.3.1 Analysis of causes

Due to network latency, and the image loading is slow, resulting in the image compression height

5.3.2 Set fixed aspect ratio

// If the height is set to 0, the padding-bottom will be set to the width
<style lang="stylus" scoped>
	.wrapper
      overflow hidden
      width 100%
      height 0
      padding-bottom 31.25%
</style>
Copy the code

5.3.3 expand

Parent display:flex layout, child flex:1; Min-width :0, indicates the remaining width of the adaptive parent element and does not exceed the width of the parent element

Implementation of AxiOS cross-platform request (Ajax)

6.1 Downloading plug-ins

npm install axios --save
Copy the code

6.2 the use of

import axios from 'axios'
axios.get('/api/index.json', {
  params: {
    id: 1
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
Copy the code

6.3 User-defined Path forwarding

// config/index.js changes the configuration to route/API to /static/mock
proxyTable: {
 '/api': {
  	target: 'http://127.0.0.1:8080'.pathRewrite: {
    	'^/api': '/static/mock'}}}Copy the code

6.4 develop

// modify package.json to add --host 0.0.0.0 so that access is IP, default is not IP access "scripts": {"dev": "Webpack - dev - server - the host 0.0.0.0 - the inline - progress - config build/webpack dev. Conf., js", "start" : "npm run dev", "lint": "eslint --ext .js,.vue src", "build": "node build/build.js" }Copy the code

7, Better Scroll plug-in use

7.1 the use of

NPM install better scroll –save
Introduce better-scroll: import Bscroll from “better-scroll”
Dom: < div ref=”myRef”>
Bscroll: this.scroll=new bscroll (this.$refs.div);
Bscroll scroll to specify the position of the DOM API, enclosing scroll. ScrollToElement (this. $refs. MyRef)

7.2 pay attention to

By default, it blocks touch events. Add click: true to the configuration, otherwise @click will fail on the mobile end

mounted(){
	this.scroll=new Bscroll(this.$refs.wrapper, { mouseWheel: true.click: true.tap: true})}Copy the code

V – for can lead to this. $refs. MyRef results for arrays, access to a single Dom need to specify the subscript, such as: [0]

Eight, vuex

8.1 Application Scenarios

Using Vuex can be tedious and redundant if you don’t plan to develop large, single-page applications. That’s true — if your application is simple, you’d better not use Vuex. A simple Global Event Bus is all you need. But if you need to build a medium to large single-page application, and you’re probably thinking about how best to manage state outside of components, Vuex would be the natural choice

8.2 Downloading plug-ins

npm install vuex –save
For large applications, we would want to split Vuex related code into modules. Here is an example project structure:

├─ index.html ├─ download.js ├─ API │ ├─ ├─ ├─Extract THE API request├ ─ ─ components │ ├ ─ ─ App. Vue │ └ ─ ─... └ ─ ─ store ├ ─ ─ index. Js# where we assemble modules and export store├ ─ ─ actions. JsRoot level action├ ─ ─ mutations. JsMutation at the root level└ ─ ─ modules ├ ─ ─ cart. Js# Shopping cart module└ ─ ─ products. Js# Product module
Copy the code

Introduced in main.js

import store from "./store"
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})
Copy the code

import { mapState, mapMutations } from 'vuex'
export default {
  name: 'CityList'.props: {
    hot: Array.cities: Object.letter: String
  },
  computed: {
    ...mapState({
      currentCity: 'city'  // Get the city assignment in modules to the property currentCity})},methods: {
    handleCityClick (city) {
      This. codestore.com MIT ('changeCity', city) simplify
      this.changeCity(city)
      this.$router.push('/')},... mapMutations(['changeCity'])},watch: {
    // Listen for letter changes due to the V-for modifier that causes the array to get all the increment [0] to get the DOM element object
    letter () {
      if (this.letter) {
        const element = this.$refs[this.letter][0]
        this.scroll.scrollToElement(element)
      }
    }
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.wrapper, {mouseWheel: true.click: true.tap: true}}})Copy the code

9, localStorage localStorage

let defaultCity='chongqing';  
try{    
	// Prevent an error when the user turns off the cache
    if(localStorage.city){
    	defaultCity=localStorage.city
    }
}catch(e){}
        
export default new Vuex.Store({
    state:defaultCity,     // The city displayed in the header of the home page is localstorage. city or Chongqing by default
})
Copy the code

10. The keep-alive code is optimized to store loaded pages in the cache

10.1 the use of

<! Vue file --> <template> <div id=" App "> <! Keep-alive --> <keep-alive exclude="Detail"> <router-view/> </keep-alive>  </div> </template> <script> export default { name: 'App' } </script> <style> </style>Copy the code

10.2 Code determination whether to trigger AXIos to reload data

The value of activated is called when the page is displayed again
activated () {
    // Re-render the page when the city changes
    if (this.lastCity ! = =this.city) {
    	this.lastCity = this.city
    	this.getHomeInfo()
    }
}
Copy the code

11. Page hopping

11.1 the router – the link

<! <li></li> </li> </li>
<router-link
        tag="li"
        class="item border-bottom"
        v-for="item of list"
        :key="item.id"
        :to="'/detail/' + item.id"
      >
</router-link>
Copy the code

11.2 this. $router. Push (‘/’)

this.$router.push('/')
Copy the code

11.3 develop

$route.params.id = this.$route.params.idCopy the code

Rolling events

12.1 create

{window.addeventListener ('scroll', this.handlescroll)}Copy the code

12.2 destruction

// The page is hidden or replaced by a new page. Otherwise each page will trigger the scroll event deactivated () {window. The removeEventListener (' scroll ', enclosing handleScroll)}Copy the code

12.3 Go to Another Page with the scroll bar at the top

/ / router/indx. Js file
export default new Router({
  routes: [{path: '/'.name: 'Home'.component: Home
    },
    {
      path: '/city'.name: 'City'.component: City
    },
    {
      path: '/detail/:id'.name: 'Detail'.component: Detail
    }
  ],
  // Switch the page to relocate to the top
  scrollBehavior (to, from, savedPosition) {
    return {x: 0.y: 0}}})Copy the code

Xiii. Expansion

13.1 Value Transfer between Parent and Child Components

// Parent > child passes values via properties: parent component: :city="city"Child component: props: {city: String} // Child > parent triggered by an event: child component: this.$emit('change', params) parent component: @change="handleLetterChange"
Copy the code

13.2 Sibling Component Value Transfer

Sibling 1-> Parent component -> sibling 2Copy the code

13.3 Other Components

Using vuex |localStorage
Copy the code

13.4 Installing taobao Image

npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy the code

13.5 Vue life cycle diagram

Vue2.5 qunar App actual combat project development knowledge comb

Introduction to the

A click event 300ms delay occurs on ios on mobile terminal.

1.1 FastClick plugin introduced

1.2 Import and use the main.js file

Use of stylus (expressive, dynamic, robust CSS)

2.1 the use of

2.2 analytical

Three, iconfont icon use

3.1 Create icon project and add files to the development project

3.2 Use in code

4. The meaning of @

4.1 pay attention to

4.2 example

4.3 develop

Vue -awesome-swiper

5.1 introduced

5.2 the use of

5.3 Page load jitter Occurs

Implementation of AxiOS cross-platform request (Ajax)

6.1 Downloading plug-ins

6.2 the use of

6.3 User-defined Path forwarding

6.4 develop

7, Better Scroll plug-in use

7.1 the use of

7.2 pay attention to

Eight, vuex

8.1 Application Scenarios

8.2 Downloading plug-ins

9, localStorage localStorage

10. The keep-alive code is optimized to store loaded pages in the cache

10.1 the use of

10.2 Code determination whether to trigger AXIos to reload data

11. Page hopping

11.1 the router – the link

11.2 this. $router. Push (‘/’)

Rolling events

12.1 create

12.2 destruction

12.3 Go to Another Page with the scroll bar at the top

Xiii. Expansion

13.1 Value Transfer between Parent and Child Components

13.2 Sibling Component Value Transfer

13.3 Other Components

13.4 Installing taobao Image

13.5 Vue life cycle diagram

Related Posts

Webpack4 Builds enterprise-level scaffolding

Talk about JS garbage collection

Vue2 + VUE-Router + ES6, vue2 latest SPA project actual combat – imitation understand the ball emperor – explosive football