基于Vue开发的电商APP项目——蘑菇街app
基于Vue开发的电商APP项目——蘑菇街
项目源码:https://github.com/Limna777/Shopmall.git
接口私聊
1、项目描述
- 项目技术栈Vue2.0 + vuex + vue-router + ES6 + webpack + axios
- 项目采用模块化、组件化、工程化的模式开发
- 项目分为四大基本模块:首页 + 分类 + 购物车 + 我的
2、使用的插件或第三方库
- 使用 vue-router 开发单页面
- 使用 vuex 管理应用组件的状态
- 使用 vue-lazyload 实现图片的懒加载
- 使用 axios 的封装从后端拿取数据使用 less 写部分组件的样式
- 使用 better-scroll 实现移动端页面滑动效果
3、页面主要实现的功能
1、首页
- 首页轮播图的展示
- 首页局部商品分类应用的切换
2、应用分类
- 头部nav-bar可跳转到搜索页面
- 左侧遍历数据库的第三级分类进行展示
- 右侧对左侧标题的选择进行对应加载、显示
- 可点击右侧对应展示的商品跳转到详情页面
3、购物车
- 用户可在详情页进行商品的购物车加购
- 商品的全选功能
4、个人中心
- 利用组件化完成基本页面的布局
4、基本目录
|
|—— build
|—— config
|——src : dev resources.
| |—— assets/
| | |css
| | |images
| |—— public/ 公共组件
| | | BottomNav.vue
| | | SearchBar.vue
| | |____ TabBar.vue
| | |____ sidebar.vue
| |—— page
| | |____ cart
| | |____ category
| | |____ good
| | |____ mainframe
| | |____ mine
| |—— router/
| | |____ index.js 路由映射
| |—— store/
| | |____ store.js
| |—— App.vue :neteast-yanxuan SPA
| |__ main.js : the entry of douban-movieSPA
|
|__ static : static files