VUE component development related configuration

package.json

"dependencies": {

 //es syntax escape

      "babel-runtime":"^6.0.0",

    "vue": "^2.5.2",

    "vue-router": "^3.0.1",

    //Solve the 300ms delay of mobile clicks

    "fastclick":"^1.0.6"

  },

main.js

import fastclick from 'fastclick'

//All clicks below the body do not have a delay of 300 milliseconds

fastclick.attach(document.body)

app.view

<template>

  <div id="app">

use

  <header></header>

  </div>

</template>

 

<script>

Register components

    import MHeader from 'components/header/header' 引入

export default {

 components:{

    MHeader registration

 }

webpack.base.conf.js

Alias ​​configuration is mainly path configuration

resolve: {

    extensions: ['.js', '.vue', '.json'],

    alias: {

      'vue$': 'vue/dist/vue.esm.js',

      '@': resolve('src'),

//'components' alias will report an error otherwise

      'components':resolve('src/components'),

    }

  },

 

 

How to solve the vue project can not automatically open the browser

First find the config/index.js file

Find autoOpenBrowser in file module.exports configuration

At this time we see that the setting is false

Modify autoOpenBrowser to true

 

Router

Introduce components in index.js

Import Rank from ‘components/recommend/ recommend‘

Import complete reconfiguration;

Export default new Router({

Routes:[

{

Path:’/recommend’,

Component: recommend’

}]

   

 

})

 

Pass in main.js

 

Pass in app.vue

 

set default display

  {

       // default displayed page

      path: '/',

      redirect: ‘/ recommend’

},

 

 

How to use axios to process ajax requests in Vue componentization

First introduce axios in main.js

?

// import axios
import axios from 'axios'

At this time, if you want to use axios in other components to make ajax requests or prompt an error, the error content is roughly axios is undefined.

Our usual solution is to rewrite axios as a prototype property of Vue, such as 2

Write axios into Vue's prototype chain as a Vue property

?

// Set the default host for axios requests
axios.defaults.baseURL = "https://www.ifilm.ltd/api/"
// Bind axios to vue as a property
Vue.prototype.$http = axios

use axios in other components

?

this.$http.get('路由').then(response => {
  // todo something
  })

This method can be used analogously to other libraries of Vue

Two deprecated usage examples

Globalize axios as a global variable

?

// import axios
import axios from 'axios'
// make axios global
window.axios = axios;

Another less elegant way is to import the corresponding library in each component you need

When vue introduces js file , this dependency was not found: error

wrong path

use carousel

config file add

“better-scroll”:”^0.1.15”

Format: let obj = new BScroll(object,{[option1,],.,.});

Options parameter

• startX:  0 the starting X-axis position
• startY:  0 the starting Y-axis position
• scrollY: The  true scrolling direction is the Y axis
• scrollX: true scrolling direction is the X axis
• click:  true Whether to dispatch the click event, usually to judge the click dispatched by the browser or the click dispatched by betterscroll, you can use _constructed, if it is dispatched by bs, it is true
• directionLockThreshold: 5
• momentum:  true Whether to enable sliding inertia when sliding quickly
• bounce:  true Whether to enable the bounce animation effect
• selectedIndex:  0 Valid when wheel is true, indicating the selected wheel index
• rotate:  25 Valid when wheel is true, indicating the rotation angle of each layer of the selected wheel
• wheel:  false This property is used by the picker component, and normal list scrolling does not require configuration
• snap:  false This property is used for the slider component, and normal list scrolling does not require configuration
• snapLoop: Is  false it possible to loop the carousel seamlessly
• snapThreshold:  0.1 The threshold for page switching when swiping with a finger, and the next page can be swiped if it is greater than this threshold
• snapSpeed:  400, the animation time of the carousel image switching
• swipeTime:  2500 swipe duration
• bounceTime:  700 The number of milliseconds that the bounce animation lasts
• adjustTime: when  400 wheel is true, it is useful to adjust the time to stay at the position
• swipeBounceTime:  1200 swipe bounce time
• deceleration: The  0.001 larger the rolling momentum deceleration, the faster it is recommended not to exceed 0.01
• momentumLimitTime:  300 The maximum time in line with inertial drag
• momentumLimitDistance:  15 The minimum drag distance that conforms to inertial drag
• resizePolling:  60 Recalculate better-scroll interval when window is resized
• preventDefault:  true whether to prevent the default event
• preventDefaultException:  { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } prevent default event
• HWCompositing:  true Whether to enable hardware acceleration
• useTransition:  true Whether to use the CSS3 Transition property
• useTransform:  true Whether to use the Transform property of CSS3
• probeType:  1 When scrolling, the scroll event will be dispatched and the current will be intercepted. 2When scrolling, the scroll event is dispatched in real time without interception. 3In addition to dispatching scroll events in real time, scroll events can still be dispatched in real time in the case of swipe