Code Monkey home page Code Monkey logo

ddbuy's Introduction

Star Vue Vant-ui Vant-ui geekJames easymock license

简体中文 | English

简介

ddBuy是一个移动端开源电商项目,它基于 vue 2.xvant 2.x实现。使用了最新的Vue全家桶技术栈,以及一些优秀的开源库如better-scrollmoment.jstwix.jspubsub-js,后台数据通过Easy-Mock搭建。支持多语言国际化,相信不管你是处于哪个段位的攻城狮,本项目都能帮助到你。

V1.3.0及以上版本支持国际化语言

支持 英语 中文

作者 极客James

前序准备

如果你是刚入门Vue的小白墙裂建议过一遍Vue官方文档,如果你已经掌握了Vue,那么墙裂建议按照Vue代码风格指南来写代码。

你需要在本地安装 nodegit。本项目技术栈基于 ES2015+vuevuexvue-routervue-cliaxiosvant-ui,所有的请求数据都使用Mock.js进行模拟,提前了解和学习这些知识会对使用本项目有很大的帮助。

同时配套了Vue基础系列教程文章,适合小白入门Vue,后期会把整个ddBuy项目拆分些技术文章出来。

欢迎提Bug,如有新的需求和想法,欢迎 issue 和 pr

完整项目图

项目架构树

image

image

image

如何运行

# 克隆项目到本地
git clone https://github.com/Geek-James/ddBuy.git

# 进入项目目录
cd ddbuy

# 安装依赖
npm install

# 启动服务
npm run serve

浏览器访问 http://localhost:8080

发布

# 构建生产环境
npm run build

在线浏览器预览

请把浏览器切换到移动端模式

手机端扫码预览

影响力

Stargazers over time

浏览器支持

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
IE10, IE11, Edge last 2 versions last 2 versions last 2 versions

留下脚印

MIT许可协议

MIT

声明

本项目仅做技术交流和学习,不建议用于商业目的!

Copyright (c) 2021 极客-James

ddbuy's People

Contributors

geek-james avatar martinwithyou avatar zishiluojin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ddbuy's Issues

使用 async await 简化代码

// 数据初始化
_initData () {
  getHomeData().then(response => {
    if (response.success) {
      // 给轮播组件 sowing_list赋值
      this.sowing_list = response.data.list[0].icon_list;
      this.nav_list = response.data.list[2].icon_list;
      this.flash_sale_product_list = response.data.list[3].product_list;
      this.tabbar_all_product_list = response.data.list[12].product_list;
      this.isShowLoading = false
      // 给特色专区赋值
      this.specialZone = response.data.special_zone;
      // 获取首页广告图
      this.home_ad = response.data.home_ad.image_url;
    }
  }).catch(error => {
    console.log(error);
  });

首页跳到分类页tabbar 没有跟随跳转需要加一个路由监听

首页跳到分类页tabbar 没有跟随跳转需要加一个路由监听,你写在created 里的 switch 可以不用去写,进入首页created 只会执行一次。
添加监听代码如下:
watch: {
$route: {
handler(val, oldVal) {
switch (val.name) {
case "home":
this.active = 0;
break;
case "category":
this.active = 1;
break;
case "eat":
this.active = 2;
break;
case "cart":
this.active = 3;
break;
case "mine":
this.active = 4;
break;
default:
break;
}
},
deep: true
}

iphoneXR/11下滑时浏览器底部工具栏隐藏,购物车页面tabbar被遮挡

iphoneXR/11(带底部黑条的手机)下滑时浏览器底部工具栏隐藏,购物车页面的底部tabbar会被submitbar遮挡。

我的解决方法:给 submitbar 也添加 safe-area-inset-bottom 属性,同时设置

/deep/.van-submit-bar {
  bottom: 1.333rem;
  background-color: transparent;
  .van-submit-bar__bar {
    background-color: #fff;
  }
}

选择位置问题

选择地址后。比如 上海某地 然后去个人中文 我的收获地址 。再返回首页,之前选择的地址刷新了。
应该是选择一次后保存不会变更了。

ToTop.vue 事件监听没有销毁

// 第38行, this.throttler 返回的是一个新的函数A
window.addEventListener('scroll', this.throttler(this.getScrollTop, 300))
//  第75 行, 销毁的是定义好的 getScrollTop 函数, 而不是函数A
window.removeEventListener('scroll', this.getScrollTop)

提个小意见

对于电商优化这块,作者可以去看看模块化加载(任务切片),可以利用ES6 的 generator 来实现任务切片,希望对你有所帮助

文字匹配错误

src/views/order/Order.vue:123
{{$t('order.use')}}{{integral}}{{$t('order.aliPay')}}{{integralToprice | moneyFormat}}

应该为
{{$t('order.use')}}{{integral}}{{$t('order.order12')}}{{integralToprice | moneyFormat}}

使用800支付宝支付 -> 使用800积分兑换

小建议

1 内容可以做一下缓存 不用我每次点击一个tab-bar后回来又是重新刷新 又要滑到原来的位置 体验不好吧
2 迟点什么那里 不知道能否做到下滑的时候可以根据数据区分去控制上面导航栏
3 分类里面 点击图标报错 应该是详情页跳转还没有做吧
3 后续希望通过慢慢完善成一个完美的项目 哈哈 小萌新可以好好向大佬学历

滚动条问题

在首页里物品添加到购物车,点击购物车后滚动条没有回滚到顶部。不能及时的看到添加后的商品

start value has mixed support, consider using flex-start instead

warning in ./src/views/mine/Children/MyVip.vue?vue&type=style&index=0&id=d467415a&lang=less&scoped=true&

Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning

(89:3) start value has mixed support, consider using flex-start instead

@ ./node_modules/vue-style-loader??ref--10-oneOf-1-0!./node_modules/css-loader??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/mine/Children/MyVip.vue?vue&type=style&index=0&id=d467415a&lang=less&scoped=true& 4:14-496 14:3-18:5 15:22-504
@ ./src/views/mine/Children/MyVip.vue?vue&type=style&index=0&id=d467415a&lang=less&scoped=true&
@ ./src/views/mine/Children/MyVip.vue
@ ./src/router/router.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.1.119:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

请问下作者大佬为什么没有vant自带的组件swipe和list,而是又引入vue-awesome-swiper组件使用?

首先感谢作者大佬开源这个项目,这段时间刚好在学习vue+vant,从这个项目学到不少,再次感谢大佬,
我在看源码的时候发现作者在首页的轮播组件并不是使用的vant自带的swipe组件,而是单独引入了vue-awesome-swiper这个轮播组件,不知道到作者是出于哪方面考虑的;还有个问题就是产品列表也没有使用list组件来实现上拉加载更多这种需求,请问这是基于什么考虑的呢;
新手求教,请大佬不要笑话我哈😄

首页商品Tabbar吸顶

在首页点击了回到顶部这个组件以后,商品Tabbar吸顶效果消失。(再有纯属我自己个人体验来说:就是离开首页home这个组件以后得记录下状态和位置,然后重新回到首页的时候可以定位上一次离开的那个位置)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.