vue-day11----vue-awesome-swiper的使用

### 技术栈

    vuex

    axios

    vue-lazyload

    vue-router

    UI框架----vant

    vue-touch

    better-scroll

    UI组件封装

    JS组件封装

    vue-awesome-swiper

    安装插件：npm i axios vant vue-touch@next better-scroll vue-awesome-swiper

### 项目环境

    vue-cli@3

### vue.config.js

    const path=require("path");
    module.exports={
        configWebpack:{
            resolve:{
                alias:{
                    "@":path.join(__dirname,"./src"),
                    "@api":path.join(__dirname,"./src/api"),
                    "@components":path.join(__dirname,"./src/components"),
                    "@paegs":path.join(__dirname,"./src/paegs"),
                    "@router":path.join(__dirname,"./src/router"),
                    "@store":path.join(__dirname,"./src/store"),
                    "@utils":path.join(__dirname,"./src/utils"),
                    "@assets":path.join(__dirname,"./src/assets")
                }
            }
        },
        devServer:{
            proxy:{
                "/v3":{
                    target:"http://192.168.43.185:3000",
                    changeOrigin:true
                }
            }
        }
    }

### 配置路由

    ①在router文件夹中新建home/index.js、classify/index.js、cart/index.js、mine/index.js：

        export default{
            name:"home",
            path:"/home",
            component:()=>import("@pages/home"),
            meta:{
                title:"首页"
            }
        }

    ②在router/index.js中：

        import home from "./home";
        import classify from "./classify";
        import cart from "./cart";
        import mine from "./mine";


        const routes = [
            {
                path:"/",
                redirect:"/home"
            },
            home,
            classify,
            cart,
            mine
        ]

    

    这样做的好处是条理清晰，后面用到二级路由时在格子的js文件里配置。

### 数据的使用

    新建api/index.js文件，将接口统一管理

    ①tiantian-Api文件夹用cmd打开，npm i装插件，npm run start启动

    ②vue.config.js中配置代理：

        proxy:{
            "/v3":{
                target:"http://192.168.43.185:3000",
                changeOrigin:true
            }
        }

    ③api/index.js中定义接口 /v3/homepage ：

        export default{
            home:{
                homepage:"/v3/homepage"
            }
        }

    ④store/index.js中，actions中请求数据，mutations中修改state中数据，供页面使用：

        import http from "@utils/request.js";
        import api from "@api/index.js";
        export default{
            state:{
                banner:[],
                dataList:[],
                goodsList:[],
                promotionBanner:[],
                recommend:[]
            },
            actions:{
                async getHomepage({commit}){
                    let data=await http({
                        method:"get",
                        url:api.home.homepage
                    });
                    commit("getHomeData",data);
                }
            },
            mutations:{
                getHomeData(state,data){
                    console.log(data)
                    state.banner=data.data.banner;
                    state.dataList=data.data.dataList;
                    state.goodsList=data.data.goodsList;
                    state.promotionBanner=data.data.promotionBanner;
                    state.recommend=data.data.recommend;
                }
            },
            namespaced:true
        }

    ⑤Home/index.vue中，dispat()触发mutations中的方法，辅助函数接收state中的banner：

        import { mapState } from "vuex";
        

        created() {
            this.$store.dispatch("homepage/getHomepage");
        },
        computed: {
            ...mapState({
                banner:state=>state.homepage.banner
            })
        }

        注意：调用子模块（homepage）的属性和方法时需要在前面加 homepage

### vue-awesome-swiper的使用

    参考：https://www.npmjs.com/package/vue-awesome-swiper

    ①安装：npm install vue-awesome-swiper --save

    ②引入vue-awesome-swiper插件和css文件，注册swiper, swiperSlide组件：

        import Vue from "vue";
        import VueAwesomeSwiper from "vue-awesome-swiper";
        import "swiper/dist/css/swiper.css";
        import { swiper, swiperSlide } from "vue-awesome-swiper";
        Vue.use(VueAwesomeSwiper);


        components: { swiper, swiperSlide }

    ③html代码，遍历banner：

        <swiper ref="mySwiper" class="home_banner" :options="swiperOption">
            <swiper-slide v-for="(item,index) in banner" :key="index">
                <img :src="item.image" />
            </swiper-slide>
            <!-- 分页器 -->
            <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>
            <!-- 滚动条 -->
            <div class="swiper-scrollbar" slot="scrollbar"></div>
        </swiper>

    ④swiperOption配置项（参考swiper5使用方法----https://www.swiper.com.cn/usage/index.html）：

        data() {
            return {
                swiperOption: {
                    // 自动播放
                    autoplay: {
                        // 用户操作swiper之后，是否禁止autoplay，默认为true
                        disableOnInteraction: false,
                        delay:2000,
                    },
                    // 分页器
                    pagination: {
                        el: ".swiper-pagination"
                    },
                    // 前进后退按钮
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev"
                    },
                    // 滚动条
                    scrollbar: {
                        el: ".swiper-scrollbar"
                    },
                    // 循环
                    loop: true,
                    // 垂直滚动
                    direction: 'vertical'
                }
            };
        }