txfyteen / vue-xiaomi-shop

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

XiaoMi-Shop

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

真的没有想到，当初仅仅凭着一腔热血和对小米极简风格的喜欢，随手写的一个练习项目，居然能够获得八十多个star，30多个fork。。。真是有点惭愧啊。 由于工作的关系，这个项目可能也就一周更新个一次两次。就是这样了，每次上github找东西，都发现有人star和fork。欣喜的同时也不胜惶恐，突然有了一种使命感。那就坚持更新吧。笔耕不掇，天道酬勤。 附上一个我做的个人站点，有空可以去看看哦。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基础的同学进阶学习，零基础 No 。