2020用vue实现仿美团导航切换功能和淘宝购物车功能，实现默认第一个导航显示效果?
生活随笔
收集整理的這篇文章主要介紹了
2020用vue实现仿美团导航切换功能和淘宝购物车功能，实现默认第一个导航显示效果?
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
總結:之前一直未寫過同時實現跳轉當前頁面和跳轉新頁面的項目,要么是當前，要么是新頁面,今天更新一個兩個同時實現的項目。
：相信很多人都遇到過router-link通過to跳轉頁面有時候會不顯示內容的bug。
上傳不了完整效果圖視頻.請見諒哈.
直接上代碼:（完整代碼）
效果圖:（實現效果可直接復制粘貼）
主頁面：
導航條：超級周末頁面
購物車頁面:
大額券頁面:
其它我就省略了…
功能描述:
1.仿美團導航切換功能
2.淘寶購物車功能，加入購物車，加購功能,
3.輪播圖效果
4.循環遍歷路由導航功能，通過id跳轉
1.app.vue
<template><div id="app"><!-- <helloworld></helloworld> --><router-view></router-view></div> </template><script> import helloworld from './components/HelloWorld' export default {name: 'App',components: {helloworld} } </script><style> * {margin: 0;padding: 0; } ul, li {list-style: none; } #app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50; } body {background-color: #ccc; } .sp2 {float: left;height: 2rem;line-height: 2rem;padding-left: 5%;font-size: 23px; } .hcc {display: inline-block;font-size: 1rem; } .fl{float: left; } .fr{float: right; } </style>2.index.html
<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>nvue</title><link rel="stylesheet" href="http://at.alicdn.com/t/font_2199259_fejd027pf36.css"></head><body><div id="app"></div><!-- built files will be auto injected --></body> </html>3.router下的index.js
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import addlist from '@/components/addlist' import qiehuan from '@/components/qiehuan' import top from '@/components/top' import news from '@/components/news' import Large from '@/components/Large' import Favorite from '@/components/Favorite' import Hotevents from '@/components/Hotevents' import Novice from '@/components/Novice' import goshop from '@/components/goshop' import More from '@/components/More' import BaseListb from '@/components/BaseListb' import payment from '@/components/payment'Vue.use(Router)//全局路由export default new Router({routes: [{path: '/',component: HelloWorld,redirect:'/HelloWorld/Guess'},{path: '/top',component: top},{path: '/news',component: news},{path: '/Large',component: Large},{path: '/Favorite',component: Favorite},{path: '/Novice',component: Novice},{path: '/Hotevents',component: Hotevents},{path: '/gohshop/:pid',component: goshop,name:'goshop'},{path: '/More/:ipid',component: More,name:'More'},{path: '/BaseListb',component: BaseListb,name:'BaseListb'},{path: '/payment',component:payment,name:'payment'},{path: '/HelloWorld',name: 'HelloWorld',redirect:'/HelloWorld/Guess', //重定向:默認頁面//這個是關鍵哦component: resolve => require(['@/components/HelloWorld'], resolve),children: [{//apath: 'Guess',component: resolve => require(['@/page/Guess'], resolve),//路由懶加載},{//bpath: 'weekend',component: resolve => require(['@/page/weekend'], resolve),},{//cpath: 'Special',component: resolve => require(['@/page/Special'], resolve),},{//dpath: 'Goodshop',component: resolve => require(['@/page/Goodshop'], resolve),},]},{path: '/*',component: HelloWorld},//通用符號],mode:"history"})4.main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import store from './store' import 'swiper/dist/css/swiper.css' import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.use(VueAwesomeSwiper); Vue.config.productionTip = false/* eslint-disable no-new */ new Vue({//根實例el: '#app',router,store,//注冊components: { App },template: '<App/>' })5.helloworld.vue
<template><div class="hello"><!---------------top ------------------><top :flag="true"><i class="iconfont icon-shouyeshouye sp2"></i><h3 class="hcc">我的網站</h3></top><!-- ----------center-------------- --><!-- swiper --><div class="swp"><Swiper :swiperImgs="bannerlist"></Swiper></div><!-- 導航條 --><div class="fl-div"><ul class="uls"><router-link tag="li" to="/news"><span></span><span>今日更新</span></router-link><router-link tag="li" to="/Large"><span></span><span>大額券</span></router-link><router-link tag="li" to="/Favorite"><span></span><span>收藏夾</span></router-link><router-link tag="li" to="/Hotevents"><span></span><span>熱門活動</span></router-link><router-link tag="li" to="/Novice"><span></span><span>新手上路</span></router-link></ul><slot></slot></div><!-- ----------------bottom ---------------------><div class="h_b"><ul class="ull"><!-- 遍歷導航 --><!-- <router-link tag="li" :to="{name:'qiehuan',params:{id:item.id}}" active-class="active" v-for="(item,index) of ary" :key="index">{{item.name}}</router-link> --><router-link to="/HelloWorld/Guess" tag="li"><div class="children">猜你喜歡</div></router-link><router-link to="/HelloWorld/weekend" tag="li"><div class="children">超級周末</div></router-link><router-link to="/HelloWorld/Special" tag="li"><div class="children">今日特價</div></router-link><router-link to="/HelloWorld/Goodshop" tag="li"><div class="children">發現好店</div></router-link></ul><router-view></router-view></div><!--------------------jieshu ---------------------></div> </template><script> import top from './top'//頭部 import Swiper from '../base/Swiper'//輪播 // 因為用變量導出，所以引入的時候必須用對象來引入{導出的}地址 import { getBanner, getHotList } from '../api/index' //引入cookie查找 import Cookies from 'js-cookie' import Guess from '../page/Guess' export default {name: 'HelloWorld',data () {return {bannerlist: [],//接收數據}},components: {top: top,Swiper, Guess},created () {this.getb();},methods: {clickltem: function (path) {this.$router.push(path);},getb () {return getBanner().then((res) => {this.bannerlist = res.banner;})}} } </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="less"> .hello {width: 100%;//swiper.swp {width: 100%;margin: 2.1rem 0 0 0;font-size: 0.1rem;}//導航條一.fl-div {margin-top: 0.1rem;ul {display: flex;display: -webkit-flex;background-color: white;height: 6rem;li {width: 25%;span {display: block;font-size: 12px;}span:nth-of-type(1) {height: 4rem;line-height: 4rem;background-color: #ccc;margin: 0.2rem;border-radius: 1rem;}span:nth-of-type(2) {height: 1rem;line-height: 1rem;text-align: center;}}}.router-link-exact-active {color: #ff5700;}}//導航條二.h_b {.ull {border-top: 0.01rem solid #000;list-style-type: none;padding: 0;left: 0;height: 44px;line-height: 44px;display: flex;-webkit-display: flex;width: 100%;background-color: white;li {flex: 1;font-size: 0.7rem;font-weight: 600;.children{border-bottom:.01rem solid #ccc;} }.lis {border: 0.01rem solid orange;}.router-link-exact-active {color: red;} }}//jieshu } </style>6.goshop.vue
<template><div class="goshop"><!----------------- top -----------><top :flag="true" class="cc"><i class="iconfont icon-fanhui sp2" @click="golist"></i></top><!------------ center -------------><div class="g_c"><p class="p_top"><img :src="booklist.image" :alt="booklist.image"></p><!-- 女神價 --><div class="uls mc"><p class="p1">女神價</p><p class="p2"><span class="s1">{{booklist.price|sumA| sumB('￥')}}</span><span class="s2">價格{{booklist.prices| sumB('￥')}}</span></p><div class="fl-p3"><p>淘金幣可抵4.4元起</p><p>查看></p></div><p class="p4">{{booklist.fo}}</p><div class="ul_p"><p><i class="iconfont icon-shoucang"></i><span>推薦</span></p><p><i class="iconfont icon-qicheqianlian-"></i><span>幫我選</span></p><p><i class="iconfont icon-42"></i><span>分享</span></p></div></div><div class="uls_1 mc"><!-- 規格 --><div class="dd"><p class="p1"><span>選擇</span><span>規格分類/大/中/小</span><span class="ct">></span></p><!-- 圖片 --><div class="p2"><div class="p_le"></div><div class="p_tu"><img :src="booklist.image" :alt="booklist.image" class="tu"><img :src="booklist.image" :alt="booklist.image" class="tu"><img :src="booklist.image" :alt="booklist.image" class="tu"><img :src="booklist.image" :alt="booklist.image" class="tu"></div><div class="lei_xing">共6種款式類型可選</div></div></div><!-- 發貨 --><div class="dd tt"><p class="p1"><span>發貨</span><span>江蘇南通 |快遞:快遞包郵</span><span class="ct">月銷{{booklist.price}}></span></p><div class="dt"><div class="t1"></div><div class="t2">配送至: 北京 良鄉 拱辰</div></div></div><div class="dd"><p class="p1"><span>保障</span><span>付款后48小時內發貨 ' 15天退貨</span><span class="ct">></span></p></div><div class="dd"><p class="p1"><span>參數</span><span>品牌 材質...</span><span class="ct">></span></p></div></div><div class="uls_2 mc"><p class="l1"><span>寶貝評價(196)</span><span>查看全部></span></p><p class="moxing l2"><span>質量好({{booklist.price}})</span><span>材質好({{booklist.prices}})</span><span>樣式好看({{booklist.price}})</span><span></span></p><!-- 頭像 --><div class="tou_xiang"><div class="tou_left"><img :src="booklist.image" :alt="booklist.image"></div><div class="tou_right"><p>t**5</p><p>11天前</p></div></div><p class="ping_jia">圖案很好看</p><!-- 頭像 --><div class="tou_xiang"><div class="tou_left"><img :src="booklist.image" :alt="booklist.image"></div><div class="tou_right"><p>t**5</p><p>19天前</p></div></div><p class="ping_jia br">收到后就打開看看,質量很好，非常喜歡,還有再來買。</p><!-- 買家秀 --><div class="mai_jia moxing"><p>買家秀({{booklist.price}})</p><p>查看全部></p></div><!-- 買家圖片 --><div class="moxing tu_pian"><img :src="booklist.image" :alt="booklist.image"><img :src="booklist.image" :alt="booklist.image"><img :src="booklist.image" :alt="booklist.image"><img :src="booklist.image" :alt="booklist.image"></div><!-- 問大家 --><div class="mai_jia moxing"><p>問大家</p><p>查看全部></p></div><!-- 問大家評價 --><div class="moxing ping_jia col"><p><span>問</span>質量會不會很差</p><p>2個回答</p></div><div class="moxing ping_jia col"><p><span>問</span>會很亮嗎?</p><p>2個回答</p></div></div><div class="uls_3 mc"><!-- 家具無憂 --><div class="u3_top moxing"><div class="tou_left"><img :src="booklist.image" :alt="booklist.image"></div><div class="tou_center"><p>時尚家居 品質無憂</p><p><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i></p></div><div class="tou_right"><p>寶貝描述4.8<span class="ct">平</span></p><p>賣家服務4.8<span class="ct">平</span></p><p>物流服務4.8<span class="ct">平</span></p></div></div><!-- 逛逛寶貝 --><div class="u3_center moxing"><p><span>進店逛逛</span> </p><p><span>全部寶貝</span></p></div><!-- 店鋪推薦 --><div class="u3_bottom"><div class="tp moxing"><p>店鋪推薦</p><p>查看全部></p></div><!-- 推薦同款 --><ul class="u3_uls"><li v-for="(item,index) of getlist" :key="index"><p class="p1"><img :src="item.image" :alt="item.image"></p><p class="p2">{{item.fo}}</p><p class="p3">{{item.price|sumA| sumB('￥')}}</p></li></ul></div></div><!-- center-bootom --></div><!------------ bottom -----------><div class="a_bottom"><button class="btn btn1" @click="addshop(booklist.index)">加入購物車</button><router-link to="/More/123" tag="button" class="btn btn2">立即購買</router-link><router-link to="/"><i class="iconfont icon-kefu1 c1"><h6>客服</h6></i> </router-link><!-- 路由傳參當無法顯示頁面時，必須傳個參數名才可以顯示 --><router-link to="/More/123"><i class="iconfont icon-qicheqianlian- c2"> <p class="toying" v-show="flag">1</p><h6>購物車</h6></i> </router-link><slot></slot></div><!----------- jieshu -------></div> </template><script> import top from '../components/top' import { getHotList } from '../api/index.js' import Cookies from 'js-cookie' //js-cookie可以存數據,也可刪除數據 export default {name: 'goshop',data () {return {booklist: [],//存數據1getlist: [],//存數據2flag: false//默認false}},filters: {sumA: function (value) {value = Number(value);return value.toFixed(2);},sumB: function (price, char) {return char + price}},created () {//初始之后this.getb();this.geth();//獲取當前數據},methods: {//自定義方法golist () {//返回上一頁this.$router.push('/HelloWorld');},getb () {return getHotList().then((res) => {this.booklist = res.hotlist[this.$route.params.pid];console.log(this.booklist)})},geth () {return getHotList().then((res) => {this.getlist = res.hotlist;console.log(this.getlist)})},//購物車用cookie獲取數據，要下載npm install js-cookieaddshop(pid){//購物車的定義方法this.flag = true;//定義一個變量let shoplist=Cookies.get('shoplist');//get獲取到這個方法let ary={};//定義對象if(shoplist){ary=JSON.parse(shoplist);//ary獲取買的東西=轉字符串對象console.log(ary);if(ary[pid]){//對象包括數字就成了{""}ary[pid]+=1;//買過了，又買了}else{ary[pid]=1;//買過了，這是第一次買}}else{//沒有買ary[pid]=1;//當前是數組轉字符串[括起來]}Cookies.set('shoplist',JSON.stringify(ary));}},components: {top} } </script><style scoped lang="less"> .goshop {width: 100%;.iconfint {color: white;}.cc {background-color: rgba(126, 122, 122, 0.7);color: whitesmoke;}.g_c {margin-top: 2.3rem;.moxing {display: -webkit-flex;display: flex;justify-content: space-between;}.p_top {height: 50%;img {width: 100%;height: 100%;}}//以下是公共樣式mc.ct.moxing.mc {margin: 0.3rem;padding: 0.4rem;background-color: white;border-radius: 0.6rem;}.ct {color: #ccc;}//以上是公共樣式.uls {.p1 {width: 100%;text-align: left;font-size: 0.7rem;color: tomato;}.p2 {width: 100%;text-align: left;margin-top: 0.2rem;.s1 {font-size: 1.2rem;color: tomato;}.s2 {text-decoration: line-through;padding-left: 0.3rem;font-size: 0.7rem;}}.fl-p3 {width: 100%;display: -webkit-flex;display: flex;justify-content: space-between;font-size: 0.7rem;color: tomato;margin-top: 0.2rem;p:nth-of-type(1) {background-color: rgba(224, 15, 15, 0.2);padding: 0.1rem;border-radius: 2%;}}.p4 {margin-top: 0.2rem;width: 100%;text-align: left;font-size: 0.9rem;font-weight: bold;}.ul_p {color: #ccc;margin-top: 0.3rem;display: -webkit-flex;display: flex;justify-content: space-between;p:nth-of-type(1),p:nth-of-type(2),p:nth-of-type(3) {width: 33.33333%;text-align: center;span {font-size: 0.8rem;padding-left: 0.2rem;}}}}.uls_1 {.dd {margin-top: 0.3rem;.p1 {width: 100%;display: -webkit-flex;display: flex;justify-content: space-between;font-size: 0.7rem;span:nth-of-type(1) {width: 12%;color: #ccc;text-align: left;}span:nth-of-type(2) {width: 68%;text-align: left;}span:nth-of-type(3) {width: 20%;text-align: right;}}.p2 {margin-top: 0.2rem;display: flex;display: -webkit-flex;justify-content: space-between;.p_le {width: 10%;}.p_tu {.tu {display: inline-block;width: 2rem;height: 2rem;line-height: 2rem;}}.lei_xing {width: 40%;height: 2rem;line-height: 2rem;font-size: 0.7rem;border-radius: 0.5rem;background-color: rgba(184, 176, 176, 0.192);}}}.tt {.dt {margin-top: 0.2rem;width: 100%;display: -webkit-flex;display: flex;justify-content: space-between;.t1 {width: 13%;}.t2 {width: 87%;text-align: left;font-size: 0.7rem;color: #ccc;}}}}.uls_2 {.l1 {display: -webkit-flex;display: flex;justify-content: space-between;span:nth-of-type(1) {font-size: 0.9rem;font-weight: bold;}span:nth-of-type(2) {font-size: 0.7rem;color: tomato;}}.l2 {margin-top: 0.6rem;span {width: 25%;font-size: 0.5rem;}span:nth-of-type(1),span:nth-of-type(2),span:nth-of-type(3) {display: inline-block;background-color: thistle;margin-right: 0.1rem;text-align: center;}}.tou_xiang {margin-top: 0.6rem;display: -webkit-flex;display: flex;flex: 1;.tou_left {width: 10%;img {// display:block;width: 100%;height: 100%;border-radius: 50%;}}.tou_right {width: 80%;p {width: 100%;padding-left: 0.3rem;}p:nth-of-type(1) {width: 100%;text-align: left;}p:nth-of-type(2) {margin-top: 0;text-align: left;font-size: 0.6rem;color: #ccc;}}}.ping_jia {width: 100%;text-align: left;font-size: 0.6rem;margin-top: 0.6rem;}.br {padding-bottom: 1rem;border-bottom: 0.01rem solid #ccc;}.mai_jia {padding-top: 1rem;p:nth-of-type(1) {font-size: 0.9rem;font-weight: bold;}p:nth-of-type(2) {font-size: 0.7rem;color: tomato;}}.tu_pian {padding-bottom: 1rem;border-bottom: 0.01rem solid #ccc;img {margin: 1rem 0.1rem 0 0.1rem;width: 24%;border-radius: 0.5rem;}}.col {p:nth-of-type(1) {span:nth-of-type(1) {background-color: tomato;color: white;padding: 0.1rem;margin-right: 0.1rem;}}p:nth-of-type(2) {color: #ccc;}}}.uls_3 {.u3_top {.tou_left {width: 15%;img {width: 100%;height: 100%;border-radius: 0.5rem;}}.tou_center {p:nth-of-type(1) {font-size: 0.9rem;font-weight: bold;}p:nth-of-type(2) {text-align: left;line-height: 2rem;}}.tou_right {p {font-size: 0.4rem;height: 1rem;}}}.u3_center {margin-top: 1rem;padding-bottom: 1rem;border-bottom: 0.01rem solid #ccc;p {width: 50%;span {font-size: 0.6rem;width: 100%;height: 1rem;line-height: 1rem;color: tomato;border-radius: 0.6rem;border: 0.01rem solid tomato;padding: 0.1rem 0.2rem;margin-left: 0.4rem;}}p:nth-of-type(1) {text-align: right;}p:nth-of-type(2) {text-align: left;}}.u3_bottom {margin: 1rem 0;.tp {p:nth-of-type(1) {font-size: 0.9rem;font-weight: bold;}p:nth-of-type(2) {font-size: 0.7rem;color: tomato;}}.u3_uls {display: -webkit-flex;display: flex;flex-wrap: wrap;padding: 1rem 0 0 0;li {width: 33.333%;.p1 {padding: 0 0.1rem;img {width: 100%;height: 100%;border-radius: 0.6rem;border: 0.01rem solid #ccc;}}.p2 {width: 100%;text-align: left;font-size: 0.6rem;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.p3 {width: 100%;text-align: left;font-size: 1.1rem;color: tomato;}}}}}}//購物車.a_bottom{width: 100%;height: 42px;position: fixed;bottom: 0;display: flex;background-color:white;.btn{position: absolute;width: 35%;line-height: 35px;background: #dbe9f6;border: 0;outline: none;font-size: 14px;bottom:0;}.btn1{right: 35%;color: #4891e0;}.btn2{right: 0;color:white;background-color: #4891e0;}a{margin: 5px 0px 0px 20px;}.iconfont{font-size: 20px;color: #999;position: absolute;bottom:0;}.c1{left: 5%;}.c2{left: 17%;text-align: center;}.toying{position: absolute;top: 0%;right: 0%;width: 10px;height: 10px;line-height: 10px;border-radius: 50px;text-align: center;background: red;font-size: 6px;color: white;}h6{font-size: 12px; } } } </style>7.baselistb.vue
<template><div class="baselistb"><ul><li v-for="(items,index) in list" :key="index" class="bac" @click="golist(items)"><img :src="items.image" :alt="items.image"><div><p>{{items.fo}}</p><span class="nowrop">{{items.bookInfo}}</span><p class="price">{{items.price |sumA | sumB('￥') }}</p></div></li></ul></div> </template><script> export default {name: 'BaseListb',props: ["list"],filters: {sumA: function (value) {value = Number(value);return value.toFixed(2);//在括號內可以添加要保留的個數(n)},sumB: function (price, char) {return char + price}},methods: {golist (items) {this.$router.push({ name: 'goshop', params: { pid: items.index } })// this.$emit("jiagou",{// ipid:items// })}}} </script> <style scoped lang="less"> .baselistb {ul {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;margin-bottom:3rem;padding-bottom:1rem;li {margin: 0.1rem 2%;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom: 1px solid #f5f5f5;width: 46%;img {margin: 10%;margin-bottom: 0;width: 80%;}p {margin-left: 10%;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 80%;padding: 5px;color: #232326;font-size: 13px;}.price {color: red;font-size: 15px;text-align: left;}}.bac {background-color: white;}} } </style>8.more.vue
<template><div class="more"><!----------------------------- top -------------------><header class="s_top"><p class="p1"><span>購物車</span><span>管理</span></p></header><!------------- center ---------------------------------><div class="mac"></div><div class="s_center" v-if="thisnotshop"><ul><li v-for="(items,index) in shoplist" :key="index"><dl><dt><input type="checkbox" v-model="items.ised" /><img :src="items.image" /></dt><dd><p class="head">{{items.fo}}</p><p class="info">{{items.bookInfo}}</p><div><p class="price fl">{{items.price |sumA |sumB('￥') }}</p><span class="const fr">X {{items.const}}</span></div></dd></dl></li></ul><!-------------------- bottom ------------------------><div class="list"><p class="p1">————————更多精選商品————————</p><baselistb :list="list"></baselistb><!-- 多選框 --><div class="shopbtn"><p class="all"><!-- v-model雙向數據綁定 --><input type="checkbox" v-model="checkall" /> 全選</p><p class="sum"><router-link to="/payment" tag="button" class="btn">結算</router-link><span class="hj">合計:<span class="price">{{sum | sumA |sumB('￥')}}</span><p>不含運費</p></span></p></div></div></div><!-- fou 未購買 --><p class="notshoplist" v-else>您還沒有選擇寶貝哦<span @click="golist">(去購買)</span></p><!----------------------- jieshu --------------------------></div> </template> <script> import baselistb from '../components/BaseListb'; import { getHotList, getBanner } from '../api/index'; import Cookies from "js-cookie"; export default {name: 'More',data () {return {list: [],//存數據2shoplist: [{ getHotList }, { getBanner }],//存數據1thisnotshop: false//默認未購買}},computed: {//計算屬性checkall: {//雙向數據綁定get () {return this.shoplist.every((item, index) => {return item.ised;});},set (val) {this.shoplist.forEach(element => {element.ised = val;});}},sum: {//數量相加get () {return this.shoplist.reduce((p, n) => {//if (!n.ised) {return p;}return p + n.price * n.const;}, 0);}}},created () {//初始之后this.getl();//購物車選項this.getm();//購物車未購買項},methods: {//自定義方法jiagou(e){var isT=true;console.log(e.ipid);this.shoplist.forEach(a=>{if(a.index==e.ipid.index){a.const++;isT=false;}})if(isT){this.shoplist.push({...e.ipid,const:1})}},getl () {getHotList(),getBanner().then(res => {var shopc = Cookies.get("shoplist");//判斷是否if (shopc) {this.thisnotshop = true;var ary = JSON.parse(shopc);//轉為json對象this.shoplist = res.banner.filter(item => {item.const = ary[item.index];item.ised = true;return ary[item.index];});return;}this.thisnotshop = false;});},getm () {getBanner().then(res => {this.list = res.banner;})},golist(){//返回上一頁this.$router.push('/HelloWorld');}},filters: {//過濾器sumA: function (value) {value = Number(value);return value.toFixed(2);//在括號內可以添加要保留的個數(n)},sumB: function (price, char) {return char + price}},components: {//注冊組件baselistb,} } </script><style scoped lang="less"> *{margin:0;padding:0; } .more{width: 100%;background-color: #f5f3f3e0;.s_top {position: fixed;top: 0;margin-bottom: 0px;width: 100%;height: 44px;line-height: 44px;z-index: 999;.p1 {display: flex;justify-content: space-between;background-color:tomato;padding: 0 5%;span {color: whitesmoke;}}}//中間.mac {height: 47px;background-color: #f5f3f3e0;}.s_center {li {-webkit-box-shadow: box;box-shadow: box;background: #fff;margin-top: 10px;overflow: hidden;margin: 10px;border-radius: 3%;padding: 10px 10px;dt {width: 35%;float: left;input {width: 18px;height: 18px;background: white;-webkit-appearance: none;border: 1px solid #c9c9c9;border-radius: 50px;outline: none;color: white;}input:checked {background: url('../../static/img/duigoutianchong.png') 0 0 no-repeat;border: none;background-size: 100%;}}img {margin-left: 5%;width: 60%;border-radius: 5px;vertical-align: middle;border: 1px solid #ccc;}dd {float: left;width: 65%;p {padding: 1% 0;text-align: left;}.fl {float: left;}.fr {float: right;}.price {color: tomato;}.const {display: block;border: 1px solid #ccc;border-radius: 10px;padding: 5px;font-size: 14px;}}.head {font-size: 1rem;}.info {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;color: #999;font-size: 14px;}}}.list {.p1 {margin: 1.2rem 0;color: #9999;font-size: 0.8rem;text-align: center;}}.shopbtn {position: fixed;display: -webkit-box;display: -ms-flexbox;display: flex;width: 100%;height: 50px;line-height: 50px;bottom: 0;background: #fff;padding: 0 10px;.all {text-align: left;input {margin-top: 2px;width: 14px;height: 14px;background: white;-webkit-appearance: none;border: 1px solid #c9c9c9;border-radius: 50px;outline: none;color: white;}input:checked {background: url(/static/img/duigoutianchong.cd604ba.png) 0 0 no-repeat;border: none;background-size: 100%;}}.sum {font-size: 0.8rem;-webkit-box-flex: 2;-ms-flex: 2;flex: 2;margin: 9px 0;.price {color: tomato;}.btn {width: 42%;height: 100%;line-height: 2px;position: relative;top: -4px;right: 15px;float: right;padding: 18px 30px;border: none;outline: none;background:tomato;color: #fff;font-size: 12px;border-radius: 15px;}}p {-webkit-box-flex: 1;-ms-flex: 1;flex: 1;font-size: 12px;span {float: right;}.hj {line-height: 16px;// margin-top: 11px;margin-right: 20px;p {color: #999;font-size: 10px;}}}}.notshoplist {text-align: center;padding: 30px;} } </style>9.news.vue
<template><div class="news"><!-- top --><top :flag="true" class="n_t"><i class="iconfont icon-fanhui sp2" @click="golist"></i><h3>我的商品</h3></top><!-- center --><div class="n_c"><ul><!-- 圖片 --><li v-for="(item,index) of bannerlist" :key="index"><div class="box1"><img :src="item.image" :alt="item.image"></div><!-- 詳情 --><div class="box2"><p>{{item.fo}}</p><div class="fenbu"><p class="juan1"><span>券</span><span>10元</span></p><p class="juan2">已售2121萬</p></div><p class="juanh">券后<span class="c1">{{item.price| sumB('￥')}}</span><span class="c2">{{item.yprice|sumA| sumB('￥')}}</span></p><p class="goumai" ><span @click="goback(item)">前往購買></span> </p></div></li></ul></div><!-- bottom --><!-- jieshu --></div> </template><script> import top from '../components/top' // 1.因為用變量導出，所以引入的時候必須用對象來引入{導出的}地址 import { getBanner, getHotList } from '../api/index' //2.引入cookie查找 import Cookies from 'js-cookie' export default {name: 'news',data () {return {bannerlist: [],//接收數據}},filters:{sumA: function (value) {value = Number(value);return value.toFixed(2);},sumB:function(price,char){return char + price}},created () {//初始之后this.getb();},methods: {//自定義方法golist () {//返回上一頁this.$router.push('/HelloWorld');},getb () {return getBanner().then((res) => {this.bannerlist = res.banner;})},goback (item) {this.$router.push({ name: 'goshop', params: { pid: item.index } })// this.$emit("jiagou",{// ipid:items// })}},components: {top,} } </script> <style scoped lang="less"> .news {.n_c {margin: 2.3rem 0 0 0;ul {li {display: -webkit-flex;display: flex;background-color: white;margin: 0.2rem;padding: 0.4rem;border-radius: 2%;div:nth-of-type(1) {width: 30%;}div:nth-of-type(2) {width: 70%;}.box1 {width:50%;text-align:center;img {width: 97%;height: 100%;}}.box2 {p:nth-of-type(1) {font-size: 10px;text-align: left;color:#000;}.fenbu {width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;font-size: 0.1rem;margin-top: 0.5rem;.juan1 {border: 0.01rem salmon solid;border-radius: .2rem;span:nth-of-type(1) {display: inline-block;width:1rem;height: 1rem;line-height: 1rem;background-color: salmon;color: white;}span:nth-of-type(2) {display: inline-block;width: 2rem;height: 1rem;line-height: 1rem;color: red;text-align: center;}}.juan2{color:slategrey;font-weight: bold;}}.juanh{margin-top:.4rem;width: 100%;text-align: left;font-size:.7rem;.c1{display: inline-block;font-size: 1rem;padding-left:.1rem;}.c2{text-decoration: line-through}}.goumai{width: 100%;margin-top:.6rem;text-align: right;span:nth-of-type(1){display: inline-block;width:5rem;height: 1rem;line-height: 1rem;background-color: salmon;color:white;font-size: .8rem;text-align: center;border-radius: .3rem;padding:.1rem;}}}}}} } </style>10.novice.vue
<template><div class="novice"><!-- top --><top :flag="true"><i class="iconfont icon-fanhui sp2" @click="golist"></i><h3 class="hcc">新手上路</h3></top><!-- center --><div class="n_c"><ul><!-- <li><span>熱點問題</span></li> --><li v-for="(item,index) of booklist" :key="index"><router-link to="/">{{item.name}}{{item.fo}}</router-link></li></ul></div><!-- bottom --><!-- jieshu --></div> </template><script> import top from '../components/top' export default {name: 'Novice',data () {return {booklist: [{ name: '學費二三十萬的幼兒園值嗎？ 有幼兒園稱貴在空氣',fo:'>',index:'0' },{ name: '學費二三十萬的幼兒園值嗎？ 有幼兒園稱貴在空氣',fo:'>',index:'1' },{ name: '學費二三十萬的幼兒園值嗎？ 有幼兒園稱貴在空氣',fo:'>',index:'2' },{ name: '學費二三十萬的幼兒園值嗎？ 有幼兒園稱貴在空氣',fo:'>',index:'3' },{ name: '學費二三十萬的幼兒園值嗎？ 有幼兒園稱貴在空氣',fo:'>',index:'4' }]}},created () {//初始之后// this.getb();// this.booklist;//直接獲取自定義內容},methods: {//自定義方法golist () {this.$router.push('/HelloWorld');},getb () {// return this.function().then((res) => {// this.booklist = res.booklist;// })}},components: {top,} } </script><style scoped lang="less"> .novice {.n_c {margin-top: 2.3rem;ul {li {display: flex;display: -webkit-flex;margin: 1%;background-color: white;border-radius: 0.1rem;padding: 0.5rem;font-size: 0.4rem;justify-content: space-between;}}.router-link-exact-active {background: #ff5700;}} } </style>11.payment.vue
<template><div class="payment"><!-- top --><top :flag="true"><i class="iconfont icon-fanhui sp2" @click="prev()" ></i><h3 class="hcc">支付頁面</h3></top><!-- center --><div class="p_conent"><p>支付成功 <span class="ment" @click="golist">(去逛逛)</span></p></div><!-- jieshu --></div> </template><script> import top from '../components/top' import Cookies from 'js-cookie';//第三方插件 export default {name:'payment',created(){//初始之后//引入cookie和支付成功刪除cookie記錄Cookies.remove('shoplist');//刪除hotlist記錄},methods: {golist(){this.$router.push('/HelloWorld');},prev () {this.$router.go(-1)}},components: {top,} } </script><style scoped lang="less"> .payment{.p_conent{margin-top:2.3rem;p{height: 10rem;line-height: 10rem;.ment{color:tomato;}}} }</style>12.top.vue
<template><div class="top"><span v-if="flag" class="iconfont icon-sousuo sp1" @click='goback'></span><slot>默認</slot></div> </template><script> export default {name: 'top',props: {flag: {type: Boolean,//類型布爾值default: false//默認false }},methods: {goback () {this.$router.back();//返回上一頁}} } </script><style scoped lang="less"> .top {position: fixed;top:0;right:0;width:100%;height: 2rem;line-height: 2rem;background-color: white;border:.01rem solid #ccc;color:#2c3e50;.sp1{float: right;height: 2rem;line-height: 2rem;padding-right: 5%;font-size: 23px;} } </style>13.hotevents.vue
<template><div class="hotevents"><!-- top --><div class="h_t"><top :flag="true"><i class="iconfont icon-fanhui sp2" @click="golist"></i><h3 class="hcc">熱門活動</h3></top></div><!-- center --><div class="h_c"><ul><li v-for="(item,index) of booklist" :key="index"><p class="p1">天貓超市降爆款天天搶,還有更多五折包郵商品呦！</p><p class="p2">有效時間:<span>2019-04-01</span>至 <span>2019-04-30</span></p><div class="p3"><img :src="item.image" :alt="item.image"></div></li></ul></div><!-- bottom --><!-- jieshu --></div> </template><script> import top from '../components/top' //引入地址 import { getBanner } from '../api/index' export default {name: 'Hotevents',data () {return {booklist: []//存數據}},created () {//初始之后this.getb();},methods: {//自定義方法golist () {//返回上一頁this.$router.push('/HelloWorld');},getb () {return getBanner().then((res) => {this.booklist = res.banner;})}},components: {top,} } </script><style scoped lang="less"> .hotevents {.h_c {margin-top: 2.3rem;ul {li {background-color: white;margin: 0.2rem;padding: 0.5rem;border-radius: 2%;p {width: 100%;text-align: left;}.p1 {font-weight: 520;}.p2 {font-size: 0.7rem;color: slategrey;}.p3 {width: 100%;img {margin:1%;width: 97%;height: 150px;margin-bottom: 0;}}}}} } </style>14.large.vue
<template><div class="large"><!-- top --><top :flag="true"><i class="iconfont icon-fanhui sp2" @click="golist"></i><h3 class="hcc">商品列表</h3></top><!-- center --><div class="l_c"><ul><li v-for="(items,index) of hotlist" :key="index"><div class="dv1"><img :src="items.image" :alt="items.image"></div><div class="dv2"><p><span class="tb">淘</span>{{items.fo}}</p><!-- jiage --><div class="jgprice"><p class="p1"><span>券</span><span>{{items.juan}}</span></p><p class="p2">已售2121萬</p></div><p class="coupon">券后<span class="s1">{{items.price| sumB('￥')}}</span><span class="s2">{{items.prices|sumA| sumB('￥')}}</span></p><p class="goum" @click="goback"><span>前往購買></span></p></div></li></ul></div><!-- bottom --><!-- jieshu --></div> </template> <script> import top from '../components/top' import { getHotList } from '../api/index' //2.引入cookie查找 import Cookies from 'js-cookie' export default {name: 'Large',data () {return {hotlist: []//存數據}},filters: {sumA: function (value) {value = Number(value);return value.toFixed(2);},sumB: function (price, char) {return char + price}},created () {//初始之后this.geth();//獲取當前方法},methods: {//自定義方法golist () {//返回上一頁this.$router.push('/HelloWorld');},geth () {return getHotList().then((res) => {//獲取到定義的api的json數據this.hotlist = res.hotlist;})},goback(){alert('購買成功');}},components: {top,} } </script> <style scoped lang="less"> .large {width: 100%;.l_c {margin-top: 2.3rem;ul {li {margin: 0.1rem;background-color: white;border-radius: 0.2rem;padding: 0.3rem;display: flex;display: -webkit-flex;.dv1 {width: 30%;img {width: 91%;height: 100%;border: 1px slategrey dashed;}}.dv2 {width: 70%;p:nth-of-type(1) {width: 100%;text-align: left;font-size: 0.8rem;color: #000;.tb {width: 1rem;height: 1rem;line-height: 1rem;background-color: salmon;padding: 0.1rem;color: white;border-radius: 0.5rem;font-size: 0.7rem;text-align: center;}}}.jgprice {margin-top: 0.3rem;display: -webkit-flex;display: flex;justify-content: space-between;.p1 {width: 100%;span {font-size: 0.6rem;padding: 0.1rem 0.15rem;border: salmon 0.01rem solid;}span:nth-of-type(1) {width: 2rem;height: 1rem;line-height: 1rem;background-color: salmon;color: white;}span:nth-of-type(2) {width: 3rem;height: 1rem;line-height: 1rem;color: salmon;font-weight: 500;}}.p2 {width: 100%;font-size: 0.8rem;text-align: right;color: slategray;font-weight: 600;}}.coupon {margin-top: 0.4rem;width: 100%;text-align: left;font-size: 0.7rem;.s1 {font-size: 1rem;}.s2 {text-decoration: line-through;}}.goum {width: 100%;text-align: right;span:nth-of-type(1) {display: inline-block;width: 4.2rem;height: 1rem;line-height: 1rem;background-color: salmon;color: white;font-size: 0.8rem;text-align: center;border-radius: 0.3rem;padding: 0.1rem;}}}}} } </style>15.Favorite.vue
<template><div class="favorite"><top :flag="true"><i class="iconfont icon-fanhui sp2" @click="golist"></i><h3 class="hcc">收藏列表</h3></top></div> </template><script> import top from '../components/top' export default {name: 'Favorite',data () {return {}},methods: {golist () {this.$router.push('/HelloWorld');}},components: {top,} } </script><style scoped lang="less"> </style>16.page文件夾下
goodshop.vue
guess.vue
<template><div class="guess"><ul class="uls"><router-link v-for="(item,index) of booklist" :key="index" :to="{name:'goshop',params:{pid:item.index}}" tag="li"><img :src="item.image" :alt="item.image"><p>{{item.fo}}</p><div class="p2"><p><span class="pr">{{item.price|sumA| sumB('￥')}}</span><span class="pr2">{{item.prices| sumB('￥')}}</span></p><p><span class="pr3">首單減{{item.juan}}</span></p></div></router-link></ul></div> </template><script> import { getHotList } from '../api/index' export default {name: 'Guess',data () {return {booklist: []//存數據}},filters: {//過濾器sumA: function (value) {value = Number(value);return value.toFixed(2);},sumB: function (price, char) {return char + price}},created () {//初始之后this.getb();},methods: {//自定義方法獲取getb () {return getHotList().then((res) => {this.booklist = res.hotlist;})}} } </script><style scoped lang="less"> .guess {.uls {display: -webkit-flex;display: flex;flex-wrap: wrap;margin: 0.2rem;li {-webkit-box-sizing: border-box;box-sizing: border-box;width: 48%;background-color: white;border-radius: 1%;margin: 1%;img {width: 98%;}p:nth-of-type(1) {width: 100%;font-size: 0.8rem;text-align: left;}.p2 {width: 100%;display: -webkit-flex;display: flex;justify-content:space-between;padding-bottom:.4rem;.pr {color: tomato;}.pr2{font-size:.6rem;text-decoration: line-through;}.pr3{width:3.5rem;display: inline-block;font-size: .7rem;color:tomato;border:.01rem solid tomato;margin-right: .25rem;}}}} } </style>special.vue
<template><div class="special"><ul><li v-for="(items,index) of hotlist" :key="index"><div class="dv1"><img :src="items.image" :alt="items.image"></div><div class="dv2"><p><span class="tb">淘</span>{{items.fo}}</p><!-- jiage --><div class="jgprice"><p class="p1"><span>券</span><span>{{items.juan}}</span></p><p class="p2">已售2121萬</p></div><p class="coupon">券后<span class="s1">{{items.price| sumB('￥')}}</span><span class="s2">{{items.prices|sumA| sumB('￥')}}</span></p><p class="goum" @click="goback(items)"><span>前往購買></span></p></div></li></ul></div> </template><script> import { getHotList } from '../api/index' //2.引入cookie查找 import Cookies from 'js-cookie' export default {name:'Special',data () {return {hotlist: []//存數據}},filters: {sumA: function (value) {value = Number(value);return value.toFixed(2);},sumB: function (price, char) {return char + price}},created () {//初始之后this.geth();//獲取當前方法},methods: {//自定義方法golist () {//返回上一頁this.$router.push('/HelloWorld');},geth () {return getHotList().then((res) => {//獲取到定義的api的json數據this.hotlist = res.hotlist;})},goback (items) {this.$router.push({ name: 'goshop', params: { pid: items.index } })// this.$emit("jiagou",{// ipid:items// })}}, } </script><style scoped lang="less"> .special{width:100%;ul {li {margin: 0.1rem;background-color: white;border-radius: 0.2rem;padding: 0.3rem;display: flex;display: -webkit-flex;.dv1 {width: 30%;img {width: 91%;height: 100%;border: 1px slategrey dashed;}}.dv2 {width: 70%;p:nth-of-type(1) {width: 100%;text-align: left;font-size: 0.8rem;color: #000;.tb {width: 1rem;height: 1rem;line-height: 1rem;background-color: salmon;padding: 0.1rem;color: white;border-radius: 0.5rem;font-size: 0.7rem;text-align: center;}}}.jgprice {margin-top: 0.3rem;display: -webkit-flex;display: flex;justify-content: space-between;.p1 {width: 100%;span {font-size: 0.6rem;padding: 0.1rem 0.15rem;border: salmon 0.01rem solid;}span:nth-of-type(1) {width: 2rem;height: 1rem;line-height: 1rem;background-color: salmon;color: white;}span:nth-of-type(2) {width: 3rem;height: 1rem;line-height: 1rem;color: salmon;font-weight: 500;}}.p2 {width: 100%;font-size: 0.8rem;text-align: right;color: slategray;font-weight: 600;}}.coupon {margin-top: 0.4rem;width: 100%;text-align: left;font-size: 0.7rem;.s1 {font-size: 1rem;}.s2 {text-decoration: line-through;}}.goum {width: 100%;text-align: right;span:nth-of-type(1) {display: inline-block;width: 4.2rem;height: 1rem;line-height: 1rem;background-color: salmon;color: white;font-size: 0.8rem;text-align: center;border-radius: 0.3rem;padding: 0.1rem;}}}}} </style>weekend.vue
<template><div class="weekend"><ul><li v-for="(item,index) of booklist" :key="index"><p class="p1">天貓超市降爆款天天搶,還有更多五折包郵商品呦！</p><p class="p2">有效時間:<span>2019-04-01</span>至 <span>2019-04-30</span></p><div class="p3"><img :src="item.image" :alt="item.image"></div></li></ul></div> </template><script> import { getBanner } from '../api/index' export default {name:'weekend',data () {return {booklist: []//存數據}},created () {//初始之后this.getb();},methods: {//自定義方法golist () {//返回上一頁this.$router.push('/HelloWorld');},getb () {return getBanner().then((res) => {this.booklist = res.banner;})}}, } </script><style scoped lang="less"> .weekend{width:100%;ul {li {background-color: white;margin: 0.2rem;padding: 0.5rem;border-radius: 2%;p {width: 100%;text-align: left;}.p1 {font-weight: 520;}.p2 {font-size: 0.7rem;color: slategrey;}.p3 {width: 100%;img {margin:1%;width: 97%;height: 150px;margin-bottom: 0;}}}} } </style>17.api文件夾下api自定義后臺數據
api下index.js
18.static靜態文件夾下img文件夾
img圖片:
19.static下mock文件夾
mock文件夾json數據
banner.json
hotlist.json
{"hotlist":[{"_id":"38d78ca75edb57cb005712db480a1203","id":3.0,"index":"0","image":"https://img11.360buyimg.com/n2/s372x372_jfs/t1/59714/19/15384/96258/5dcd8916Ec8adb87c/19eb1d2ab0baf01c.jpg!q70.dpg.webp","name":"充電燈戶外照明LED大功率露營帳蓬充電燈泡夜市地攤燈應急燈家用USB充電燈泡停電照明燈家用移動燈泡 58W白光（5-20小時）","fo":"充電燈戶外照明LED大功率露營帳蓬家用移動燈泡 58W白光（5-20小時）","price":"30","prices":"35","juan":"5元"},{"_id":"38d78ca75edb587a005717cf774bf64e","price":"4.9","prices":"11.9","id":4.0,"index":"1","image":"https://m.360buyimg.com/mobilecms/s750x750_jfs/t22045/307/929094700/422408/3bc9906d/5b1be210Nf5b61f6c.jpg!q80.dpg.webp","name":"熒光棒 演唱會道具兒童發光心形星星公主魔法棒玩具閃光仙女棒可愛頭飾成人頭飾帶燈新年禮物小玩具批發 新款星星棒","fo":"熒光棒 演唱會道具兒童發光心形星星公主魔法棒","juan":"7元"},{"_id":"75777da85edb5696004c971f6948650c","id":1.0,"index":"2","image":"https://img12.360buyimg.com/mobilecms/s519x519_jfs/t1/119364/38/3338/552423/5ea7e439Ef85df0e7/3759b12c3c3d84bf.png.webp","name":"加厚擺地攤貨架折疊貨架2米夜市擺攤架子掛衣架擺攤桌-p 加厚1米布架+背包","fo":"夜市擺攤架子掛衣架擺攤桌加厚1米布架+背包","price":"57","prices":"62","juan":"5元"},{"_id":"75777da85edb5729004c9d5a02bfe036","name":"地攤貨架加厚擺攤貨架夜市折疊架子擺地攤衣架掛衣架服裝展示晾衣架 單買配套10個掛珠 我家貨架通用","fo":"夜市折疊架子擺地攤衣架服裝展示晾衣架 我家貨架通用","price":"50","prices":"57","id":2.0,"index":"3","juan":"7元","image":"https://img10.360buyimg.com/mobilecms/s519x519_jfs/t1/108529/39/3139/75909/5e0ed815E26f9a10e/092bd6afc8bfe1da.jpg!q70.dpg.webp"},{"_id":"8abc3c855edb590d004054a34fe9fa98","id":5.0,"index":"4","juan":"5元","image":"https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/126122/23/4251/42604/5edb36ceEed479b2e/860aee7c95433770.jpg!q80.dpg.webp","name":"猿人部落錄音擴音器 手持喇叭 大功率喊話器擴音喇叭大聲公導游地攤宣傳叫賣錄音喇叭手持喊話器喇叭 36秒錄音喇叭+1個5小時鋰電池","fo":"猿人部落錄音擴音器 手持喇叭36秒錄音喇叭+1個5小時鋰電池","price":"28.8","prices":"33.8"},{"_id":"38d78ca75edb57cb005712db480a1203","id":3.0,"index":"5","juan":"7元","image":"https://img11.360buyimg.com/n2/s372x372_jfs/t1/59714/19/15384/96258/5dcd8916Ec8adb87c/19eb1d2ab0baf01c.jpg!q70.dpg.webp","name":"充電燈戶外照明LED大功率露營帳蓬充電燈泡夜市地攤燈應急燈家用USB充電燈泡停電照明燈家用移動燈泡 58W白光（5-20小時）","fo":"充電燈戶外照明LED大功率露營帳蓬家用移動燈泡 58W白光（5-20小時）","price":"30","prices":"37"},{"_id":"38d78ca75edb587a005717cf774bf64e","price":"4.9","prices":"9.9","id":4.0,"index":"6","juan":"5元","image":"https://m.360buyimg.com/mobilecms/s750x750_jfs/t22045/307/929094700/422408/3bc9906d/5b1be210Nf5b61f6c.jpg!q80.dpg.webp","name":"熒光棒 演唱會道具兒童發光心形星星公主魔法棒玩具閃光仙女棒可愛頭飾成人頭飾帶燈新年禮物小玩具批發 新款星星棒","fo":"熒光棒 演唱會道具兒童發光心形星星公主魔法棒"},{"_id":"75777da85edb5696004c971f6948650c","id":1.0,"index":"7","juan":"7元","image":"https://img12.360buyimg.com/mobilecms/s519x519_jfs/t1/119364/38/3338/552423/5ea7e439Ef85df0e7/3759b12c3c3d84bf.png.webp","name":"加厚擺地攤貨架折疊貨架2米夜市擺攤架子掛衣架擺攤桌-p 加厚1米布架+背包","fo":"夜市擺攤架子掛衣架擺攤桌加厚1米布架+背包","price":"57","prices":"64"},{"_id":"75777da85edb5729004c9d5a02bfe036","name":"地攤貨架加厚擺攤貨架夜市折疊架子擺地攤衣架掛衣架服裝展示晾衣架 單買配套10個掛珠 我家貨架通用","fo":"夜市折疊架子擺地攤衣架服裝展示晾衣架 我家貨架通用","price":"50","prices":"55","id":2.0,"index":"8","juan":"5元","image":"https://img10.360buyimg.com/mobilecms/s519x519_jfs/t1/108529/39/3139/75909/5e0ed815E26f9a10e/092bd6afc8bfe1da.jpg!q70.dpg.webp"},{"_id":"8abc3c855edb590d004054a34fe9fa98","id":5.0,"index":"9","juan":"7元","image":"https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/126122/23/4251/42604/5edb36ceEed479b2e/860aee7c95433770.jpg!q80.dpg.webp","name":"猿人部落錄音擴音器 手持喇叭 大功率喊話器擴音喇叭大聲公導游地攤宣傳叫賣錄音喇叭手持喊話器喇叭 36秒錄音喇叭+1個5小時鋰電池","fo":"猿人部落錄音擴音器 手持喇叭36秒錄音喇叭+1個5小時鋰電池","price":"28.8","prices":"35.8"}] }使用這個項目之前必須下載,各種插件:
1.npm install js-cookie
2.npm install vue-awesome-swiper@2.5.4
3.npm i less less-loader style-loader
4.npm install axios
需注意：less的版本
更改前是 “less-loader”: “^7.0.2”,
更改后是 “less-loader”: “^5.0.0”,
直接更改方法:npm install less-loader@5.0.0 --save
less如果不行：請直接看這篇介紹：
https://blog.csdn.net/weixin_46409887/article/details/109627132
4.導航的跳轉有跳轉當前的，有需要打開新頁面的，這里都有實現呢
5.vue項目的名字有大小寫限制，如果引入的name：‘名字’，大寫不好使，你就改寫小寫。
總結:這里就不多介紹了，大家就去直接看代碼吧,🤭
總結
以上是生活随笔為你收集整理的2020用vue实现仿美团导航切换功能和淘宝购物车功能，实现默认第一个导航显示效果?的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 什么是寄生虫排名及寄生虫的排名原理和作用
- 下一篇： vue 页面布局常用汇总