shoppingvue+vue-router+vuex实现电商网站效果展示安装下载代码：gitclonehttps://github.com/chenchangyuan/shopping.git安装依赖：npminstall启动项目：npmrundev运行环境：nodev9.11.1npm5.6.0需求分析登录页、商品列表页（网站首页）、购物车页（实现结算）、商品详情页可以按颜色和品牌筛选商品，点击选择，再次点击取消按价格升序和降序，销量降序商品列表显示图片，名称，销量，颜色，单价实时显示购物车数量（商品类别数）购物车页面实现商品总价和总计结算、优惠券折扣数据存储&数据处理product.js存储商品数据（生产环境需要通过接口调用获取数据）{id:1,name:'AirPods',brand:'Apple',image:'/src/我mages/airPods.jpg',imageDetail:'/src/images/airPods_detail.jpg',sales:10000,cost:1288,color:'white'},window.localStorage实现数据存储和校验让username=window.localStorage。getItem('username');letpassword=window.localStorage.getItem('password');if(!util.trim(this.username)||!util.trim(this.username)){window.alert('帐号或密码不能为空');return;}if(username===this.username&&password===this.password){this.login=false;window.localStorage.setItem('loginStatus','login');this.$store.commit('得到用户',this.username);window.alert('登录成功，确认进入网站首页');window.location.href='/list';}else{window.alert('账号或密码错误');}数据过滤排序处理filteredAndOrderedList(){//复制原数组letlist=[...this。列表];//品牌过滤if(this.filterBrand!==''){list=list.filter(item=>item.brand===this.filterBrand);}//颜色过滤器if(this.filterColor!==''){list=list.filter(item=>item.color===this.filterColor);}//排序if(this.order!==''){if(this.order==='sales'){list=list.sort((a,b)=>b.sales-a.sales);}elseif(this.order==='cost-desc'){list=list.sort((a,b)=>b.cost-a.cost);}elseif(this.order==='cost-asc'){list=list.sort((a,b)=>a.cost-b.cost);}}returnlist;}实时显示应付总金额和商品数量//购物车商品总数countAll(){letcount=0;this.cartList.forEach(item=>{count+=item.count;});returncount;},//购物车商品总价costAll(){让成本=0;this.cartList.forEach(item=>{cost+=this.productDictList[item.id].cost*item.count;});returncost;}购物车结算处理//通知Vuex完成订单handleOrder(){this.$store.dispatch('buy').then(()=>{window.alert('购买成功');})},vue-router&vuexvue-router设置路由管理/src/views/目录下的vue组件，router-views挂载所有路由，登录界面和商品列表页之间的header隐藏显示，以及登录状态刷新页面跳转到列表页面，其他页面设置默认跳转跳转处理constrouter=newVueRouter(RouterConfig);//设置titlerouter.beforeEach((to,from,next)=>{window.document.title=to.meta.title;next();});//跳转后设置scroll为原点router.afterEach((to,from,next)=>{window.scrollTo(0,0);});routersconfiguration//商品列表路由配置constrouters=[{path:'/list',meta:{title:'ProductList'},component:(resolve)=>require(['./views/list.vue'],resolve)},{路径:'/product/:id',meta:{title:'ProductDetails'},组件:(resolve)=>require(['./views/product.vue'],resolve)},{path:'/cart',meta:{title:'shoppingcart'},组件:(resolve)=>require(['./views/cart.vue'],resolve)},{path:'/login/:loginStatus',meta:{title:'登录注册'},component:(resolve)=>require(['./views/login.vue'],resolve)},{路径:'*',重定向:'/login/login'}];导出默认路由器；vuex状态管理，state设置各组件共享数据，mutation实现数据同步，action异步Loading//配置Vuex状态管理conststore=newVuex.Store({state:{//产品列表信息productList:[],//购物车数据，数组形式，数据元素为对象（商品id，购买数量计数）cartList:[],//当前用户账号username:window.localStorage.getItem('username'),//loginstatusloginStatus:!!window.localStorage.getItem('loginStatus'),},getters:{//品牌，滤色器品牌：state=>{constbrands=state.productList.map(item=>item.brand);返回util.getFilterArray（品牌）；},颜色:state=>{constcolors=state.productList.map(item=>item.color);返回util.getFilterArray（颜色）；}},//mutations只能是同步方法mutations:{//添加产品列表setProductList(state,data){state.productList=data;},//添加购物车addCart(state,id){constisAdded=state.cartList.find(item=>item.id===id);//如果不存在，则将购物车设置为1，count++存在if(isAdded){isAdded.count++;}else{state.cartList.push({id:id,count:1})}},//修改购物车中的商品数量editCartCount(state,payload){constproduct=state.cartList.find(item=>item.id===payload.id);product.count+=payload.count;},//删除购物车商品deleteCart(state,id){constindex=state.cartList.findIndex(item=>item.id===id);state.cartList.splice(index,1)},//清空购物车emptyCart(state){state.cartList=[];},getUser(state,username){console.log('username',username)state.username=username;},getLoginStatus(state,flag){state.loginStatus=flag;}},actions:{//异步请求对于产品列表，使用setTimeoutgetProductList(context){setTimeout(()=>{context.commit('setProductList',product_data)},500);},//buybuy(context){//生产环境使用ajax请求服务端响应后清空购物车returnnewPromise(resolve=>{setTimeout(()=>{context.commit('emptyCart');resolve();},500);});},}});后记项目地址：看完本文，如果对你理解vue有帮助，请给个star，谢谢~作者个人微信gm4118679254欢迎加好友交流技术参考资料Vue.js实战Vue.js
