Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/konglingwen94/vue-elm-seller
:shopping_cart:高仿饿了么商家店铺的单页面应用
https://github.com/konglingwen94/vue-elm-seller
eleme-sell eleme-shop sell vue vue-eleme-sell vue-sell vue-shop vue-spa
Last synced: 13 days ago
JSON representation
:shopping_cart:高仿饿了么商家店铺的单页面应用
- Host: GitHub
- URL: https://github.com/konglingwen94/vue-elm-seller
- Owner: konglingwen94
- Created: 2020-04-21T14:11:45.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T04:31:37.000Z (almost 2 years ago)
- Last Synced: 2024-04-16T09:23:01.745Z (7 months ago)
- Topics: eleme-sell, eleme-shop, sell, vue, vue-eleme-sell, vue-sell, vue-shop, vue-spa
- Language: Vue
- Homepage: http://123.57.204.48:5000
- Size: 3.63 MB
- Stars: 27
- Watchers: 4
- Forks: 13
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-elm-seller
## 线上预览
[http://123.57.204.48:5000/](http://123.57.204.48:5000/)
## 安装依赖
```
npm install
```
### 开启一个具有热重载功能的开发服务器
```
npm run serve
```
### 构建项目
```
npm run build
```
## 主要功能
- [x] 商品菜单联动导航展示
- [x] 添加移除商品到购物车
- [x] 购物车商品列表
- [x] 清空购物车
- [x] 确认支付提示
- [x] 查看商品详情
- [x] 商品评价
- [x] 店铺综合评论
- [x] 商家信息展示
- [x] 商家收藏
- [x] 商家详情弹窗
- [x] 商品滚动列表菜单标题吸顶
- [x] 添加商品到购物车时的动画效果
- [ ] 项目整体优化
## 技术栈
`vue` `better-scroll` `lib-flexible`
`axios` `express` `node` `javascript`
`less` `css` `es6/7`
`webpack` `vue-cli`
## 项目目录
```
├── public
│ ├── data // 服务端接口数据
│ │ ├── goods.json
│ │ ├── ratings.json
│ │ └── seller.json
│ ├── favicon.ico
│ └── index.html
├── server // 服务端
│ ├── app.js // 启动服务器入口
│ ├── package-lock.json
│ └── package.json
├── src // 源代码
│ ├── assets // 静态资源
│ │ ├── font.css
│ │ ├── logo.png
│ │ └── reset.css
│ ├── components // 项目组件
│ │ ├── alert // 提示弹窗
│ │ │ ├── main.js
│ │ │ └── main.vue
│ │ ├── confirm // 带有取消和确认按钮的弹窗
│ │ │ ├── index.vue
│ │ │ └── main.js
│ │ ├── food-picker // 食品选择器
│ │ │ └── index.vue
│ │ ├── header // 页面头部
│ │ │ └── index.vue
│ │ ├── header-detail // 页面头部详情弹窗
│ │ │ ├── close.svg
│ │ │ └── index.vue
│ │ ├── icon // 通用图标组件
│ │ │ ├── index.vue
│ │ ├── rating // 商品评分组件
│ │ │ └── index.vue
│ │ ├── scroll // 通用滚动组件
│ │ │ └── index.vue
│ │ ├── shopping-cart // 购物车
│ │ │ ├── index.vue
│ │ │ └── shopping_cart.svg
│ │ ├── star-score // 评分星级组件
│ │ │ └── index.vue
│ │ ├── svg-icon // svg图标
│ │ │ └── index.vue
│ │ └── tab-bar // 可切换的导航栏组件
│ │ └── index.vue
│ ├── helper // 帮助工具
│ │ └── directive.js
│ ├── views // 页面
│ │ ├── food-detail // 商品详情
│ │ │ └── index.vue
│ │ ├── goods // 商品页
│ │ │ └── index.vue
│ │ ├── ratings // 评价页
│ │ │ └── index.vue
│ │ └── shop // 商家店铺
│ │ └── index.vue
│ ├── App.vue // 应用根组件
│ ├── main.js // 应用入口
│ └── request.js // http 请求示例
├── README.md
├── babel.config.js
├── dir.txt
├── package-lock.json
├── package.json
├── postcss.config.js
└── vue.config.js // 项目配置
```
## 项目截图
## 项目总结
- [Vue全新技术栈重构黄老师饿了么商家应用](https://juejin.cn/post/6844904202624303118)
- [Koa+Mongodb 搭建商家店铺服务端项目总结](https://juejin.cn/post/6907803934031609863)
- [Vue+ElementUI搭建商家店铺管理后台项目总结](https://juejin.cn/post/6906796790390095879)
## 支持
本项目是受 [https://github.com/ustbhuangyi/vue-sell](https://github.com/ustbhuangyi/vue-sell)此应用界面功能的启发并由个人独立完成（源代码不同）。项目技术实现上都是自己精心思考研究后开发出来的，与此同时也练习了一次`vue`项目的开发流程，个人完成项目开源后也有很大的收获。希望对看到此项目的你在学习上能有所帮助，喜欢本项目请右上角`star`一下:grin:，谢谢！我会持续开源更多好玩有趣的项目出来。