### 技术栈
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
引入reset.css,设置root fontsize为50,然后在页面量的尺寸在vscode中自动转换为rem。
### 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' } }; }
### vue-awesome-swiper自动轮播失效问题和循环播放失效问题
自动轮播失效:
问题描述:设置 autoplay:true 时,当用户操作轮播图后停止自动轮播。
解决:
将 autoplay:true 改为
autoplay: {disableOnInteraction: false,delay:2000,}
循环播放失效:
问题描述:设置 loop: true 后还是不能循环轮播。
原因:循环还没有完的时候swiper组件运行冲突出错导致的。
解决:给swiper组件添加 v-if属性 :
<swiper ref="mySwiper" class="home_banner" :options="swiperOption" v-if="banner.length">