helloforrestworld / Vue Smartisan Shop
🔨vue锤子科技商城
Stars: ✭ 15
Programming Languages
js
455 projects
Labels
锤子商城
标签(空格分隔): 作业总结
###商品页 ###购物车页面 ###商品详情 ###提交订单页 ###支付页 ###个人账户页
##启动
cd vue-hammer-shop
npm install
npm run dev
locahost:8080
##技术栈
技术栈:vue + vue-router + vuex + vue-cli
##目录结构
.
├── build // webpack配置文件
├── config // 项目打包路径
├── src // 项目核心文件
│ ├── assets // 静态资源
│ ├── components // 组件
| └── addresspop // 填写收货地址弹出框
| └── carPanel // 购物车
| └── headerNav // 头部导航
| └── prompt // 对话弹出框
| └── shopItem // 单件商品
| ├── lib // 数据目录
| └── newGoodsData // 首页商品列表数据
| └── newItemsDate // 商品详情页数据
| └── provincelist // addresspop下拉框数据
| ├── router // 路由
| ├── store // vuex
│ ├── views // 页面
│ └── account // 个人中心两个组件
│ └── ads // 收货地址
│ └── order // 订单列表
│ └── account // 个人中心页面
│ └── checkout // 提交订单页面
│ └── item // 商品详情页
│ └── payment // 支付页面
│ └── shop // 主页商品页
| └── shoplist // 购物清单页面
│ ├── App.vue // 页面入口文件
│ ├── main.js // 程序入口文件,加载各种公共组件
├── index.html // 模板html文件
├── app.js // 测试用的服务器
.
##总结
1.本项目主要用于复习vue全家桶相关知识,实现了前端部分的从购买商品起到支付的整个购物流程,项目整体复杂度并不算高,但涉及到了vue的很大部分知识。 2.项目用到的数据是自己写的伪数据,将来会把后台的部分也完成,包括登陆注册
##功能
- [x] 商品加入购物车
- [x] 购物车小球飞入
- [x] 查看商品详情
- [x] 查看购物车清单
- [x] 订单提交
- [x] 模拟支付
- [x] 个人中心
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].