这是一个高仿小米商城（手机版）的Vue项目.zip

# 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）](http://m.mi.com/) [小米商城 高仿版](https://beautifulboys.github.io/phone/mi/) 下载体验(下载demo文件夹，双击index.html即可查看)。 <p align="center"> <img src="https://github.com/beautifulBoys/beautifulBoys.github.io/blob/master/source/XiaoMi-Shop/images/newGIF.gif" width="350px"/> <img src="https://github.com/beautifulBoys/beautifulBoys.github.io/blob/master/source/XiaoMi-Shop/images/newGIF1.gif" width="350px"/> <img src="https://github.com/beautifulBoys/beautifulBoys.github.io/blob/master/source/XiaoMi-Shop/images/newGIF3.gif" width="350px"/> <img src="https://github.com/beautifulBoys/beautifulBoys.github.io/blob/master/source/XiaoMi-Shop/images/cart.png" width="350px"/> </p> ## 项目组成 * 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. 图片列表的懒加载 ## 项目安装及运行 ``` bash # 安装项目依赖 npm install # 启动服务 浏览器本地访问http://localhost:8081 npm run dev # 编译打包 npm run build ``` ## 说明 本项目适合有一定vue基础的同学进阶学习，零基础也可以。