Vue carousel components and remove routes #,

Vue carousel components and remove routes #,

Recently, the company asked me to explain how to implement vue knowledge systematically. To sum up, we generally need 7 courses. Today we will outline the basic skills we need to learn to use vue. Vue is a progressive view rendering framework. The core of vue is data. Data is usually obtained from the background at the front end and displayed on our page.

Essential for using vue basic tools, node and FQ tool blue light (if you do not have any, please contact me and give you the installation package), vue-cli, which is the most basic tool to use, if you are a background developer, we recommend you use webstrom and vscode. Both of them can configure node and use the npm command to start it. The only bad thing is that it is slow to quickly modify the code, if the computer configuration is quite good, you can use it. If your computer is relatively slow, you are advised to use sublime. you can install the plug-in.

Next we will go to the learning stage. First, let's take a rough look at the vue development process, which is also a common practice for many projects. When writing a project, we need to unify the common methods, such as request error pages, logon, registration, and frequently-used pop-up pages, which are our private methods, some objects need to be used.

A functional module designed by our system. From the perspective of development, it is common to include carousel charts, tab bar switching, search components, addresses, navigation menus (folding navigation menus ), footer (copyright information), links to friendship, personal center, Avatar modification, password resetting, Logon (third-party login), registration, list page loop, paging function, pull-down refresh, etc.

From the above discussion, we can find that we need a public component, header component, footer component, nav component, swiper component, tab component, fail component and other components in the project, today, we will share with you the swiper component encapsulated in vue.

1. install swiper and modify the package. in json, add "swiper" to this object: "^ 3.0.0". Note that this is the version of the swiper plug-in you want to use. You can check the version on GitHub, this '^' is greater than or equal to this version.

2. if you modify the configuration file in webstorm, it will tell you to update npm install. You can update it. If it fails, we recommend that you use the command window to update and use cnpm install, with this command, you can clearly see the number of dependent packages, and there will be a green check.

3. create a folder common under src to store our public components, header components, and footer components. then create a swiper. vue file, the first letter of the file name is capitalized, it is best to use English. If webstorm is used, we can create a new vue-type template file in "setting", so that the template of the vue file is automatically generated, very convenient.

4. Write our core swiper code

 1 <template> 2   <div class="swiper-container" :id="swiperId"> 3     <div class="swiper-wrapper"> 4       <div  v-bind:key="index" v-for="(item,index) in swiperD" class="swiper-slide swiper-slide-next" @click="slideTo(item.url)"> 5          6       </div> 7     </div> 8     <div class="swiper-pagination"></div> 9   </div>10 </template>11 12 <script>13 import Swiper from 'swiper'14 15 export default {16   props: [ 'swiperId', 'swiperD' ],17   data () {18     return {19 20     }21   },22   mounted () {23     this.sw()24   },25   methods: {26     sw () {27       let that = this28       // eslint-disable-next-line29       let lunbo = new Swiper('#' + that.swiperId, {30         pagination: '.swiper-pagination',31         paginationClickable: true,32         longSwiperRatios: 0.3,33         setWrapperSize: true,34         autoplay: 3000,35         autoplayDisableOnInteraction: false,36         loop: true37       })38     },39     slideTo (url) {40       console.log(url, window)41       window.location.href = url42     }43   }44 }45 </script>46 47 <style>48   @import url(./swiper.min.css);49   .swiper-container{50     padding-top:2.45rem;51     min-height:150px;52   }53   .swiper-slide{54     width:100%55   }56   .swiper-slide img{57     width:100%;58     display: block;59   }60 </style>

The introduction to swiper.min.css needs to be introduced here. Remove the scoped here. Otherwise, the style of the referenced component will not be effective.

5. Use Components

Import Components

Import Swipers from '../common/Swiper'

Introduce In Template

<Swipers swiperId = "lunbo": swiperD = "swipers"> </Swipers>
SwiperId must be passed in. swiperD is our data source.
6. Welfare after the article, remove #
Used in index. js of router

Mode: 'History ',
7. Remove unused variables in es Syntax:

// Eslint-disable-next-line
8. GitHub URL: Remember star if you like it.
Vue entry information on the seventh day is updated from time to time. If you like it, Please book it (xingguangbi, 6 yuan a copy, and you need it)