/vue-XiaoMi-Shop

这是一个高仿小米商城(手机版)的Vue项目

Primary LanguageJavaScript

XiaoMi-Shop

这是一个高仿小米商城的项目,会通过半年左右的时间逐步完善整个项目。本项目仅用于 Vue.js 实战项目的学习,不作为商业用途。

2019-03-07日补充

首先谢谢大家的star和fork,也祝大家工作顺利,升职加薪。

这个项目是大概2年前这个时间开始的,主要是为了练习vue的写法及提高js能力。因为喜欢,所以想做的尽善尽美,从而完全一比一复制了当时的小米网,所以看起来还算精致,也获得了不少关注。本来打算尽量写的完善一点,所以列了个待完善的表,想逐步完善,可是随着能力的提升,再去完善这个项目几乎没有提升了,再加上工作确实也忙,需要学习的越来越多,所以今天决定:这个项目就此结束,不在维护了。大家可以移步学习别人的项目。

今天写这个说明的目的也是和那些关注过我的项目及和我学习过、讨论过问题的朋友们说声抱歉,因为确实有好多人在使用及学习本项目。截至目前,平均我每周都能收到2个多邮件,有寻求帮助的,有请教问题的,还有寻求合作的,时间允许的情况下,我都有认真回复过。从今天起,将不在回复了,后期关注度下降后会隐藏该项目。谢谢进来的朋友们!结束

附上一个我做的个人站点,有空可以去看看哦。https://beautifulboys.github.io/

项目地址

克隆项目用:https://github.com/beautifulBoys/vue-XiaoMi-Shop.git

写在前面

本项目所有用到的全部是目前前端最热门的技术 ! !

通过本项目的学习与研究,你可以初步掌握vue的基本用法,css预处理器(less)的用法,router(路由)的用法,还可以加深了解vue-cli(脚手架)的使用,webpack的使用,babel编译代码...等等。

前端变化莫测,学无止境。作者本人也在通过学习不断巩固和提高。如果你有极客精神,我们不妨一起进步。

项目预览

用Chrome浏览器 手机模式打开,或者拖拽让浏览器变窄效果更好。自己对比体验一下吧^-^

小米官方商城(web)

小米商城 高仿版

下载体验(下载demo文件夹,双击index.html即可查看)。

## 项目组成
  • vue.js 2.0
  • vue-cli
  • less
  • webpack
  • ES6
  • eslint
  • vue-router
  • npm
  • babel

将要实现功能

  1. 首页的轮播图效果
  2. header随scroll透明度变化 √
  3. 首页banner图点击链接
  4. 首页登录功能的实现
  5. 首页底部编码实现 √
  6. 商品详情页头部搜索功能
  7. 详情页大图轮播的功能 √
  8. 加入购物车动画
  9. 购物车页面及功能 √
  10. 页面切换动画
  11. 图片列表的懒加载

项目安装及运行

# 安装项目依赖
npm install

# 启动服务 浏览器本地访问http://localhost:8081
npm run dev

# 编译打包
npm run build

说明

本项目适合有一定vue基础的同学进阶学习,零基础也可以。