Vue 插件

作者: 星星藏进黑夜 | 来源:发表于2018-07-05 11:03 被阅读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

    相关文章

      网友评论

        本文标题:Vue 插件

        本文链接:https://www.haomeiwen.com/subject/vaguuftx.html