前端之路

Vue 插件

2018-07-05  本文已影响0人  星星藏进黑夜

sass 安装指令

        cnpm i sass-loader --save-dev

        cnpm i node-sass --save-dev

less 安装

 cnpm i less less-loader --save

在style中 写上lang="less",就可以进行样式嵌套

div{color:cyan; p{ color:red; } }

axios 专门用于数据请求

 cnpm i axios --save

swiper 轮播图安装

 cnpm install vue-awesome-swiper --save

main.js

import Vue from 'vue'

import Swiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

Vue.use(Swiper)

组件

<template>

        <swiper :options="swiperOption">

                <swiper-slide>妖</swiper-slide>

                <swiper-slide>风</swiper-clide>

                <div class="swiper-pagination" slot="pagination"></div>

                <div class="swiper-button-prev" slot="button-prev"></div>

                <div class="swiper-button-next" slot="button-next"></div>

        </swiper>

</template>

<script>

        export default {

                data(){

                        return{

                            swiperOption:{//设置属性

                                    pagination: {//显示分页

                                                el: '.swiper-pagination',

                                                clickable:true

                                      },

                                     // direction : 'vertical',//切换模式  横屏或者竖屏

                                    autoplay: {//设置自动播放速度

                                        disableOnInteraction: false,

                                        delay:4000

                                    },

                                    loop:true,   //开启无限循环

                                  //设置点击箭头

                                    paginationClickable :true,

                                    prevButton:'.swiper-button-prev',

                                    nextButton:'.swiper-button-next'

                                 }

                        }

                }

        }

</script>

element ui (饿了么)

 cnpm i element-ui --save

vuex (大仓库—资源管理)

cnpm install vuex --save -dev

lazyload(懒加载)

cnpm install vue-lazyload --save -dev

上一篇 下一篇

猜你喜欢

热点阅读