Code Monkey home page Code Monkey logo

supermall's Introduction

前言

临近毕业,秋招准备找工作,由于缺少项目经验,又去找一些Vue项目实战教程学习。于是根据coderwhy老师的项目,仿写了一个类似蘑菇街的商城项目。后端接口数据由老师提供,在此致谢!(原本想仿网易云音乐,奈何音乐版权问题直教人落泪。以后看情况吧,我个人还是很喜欢网易云的。)

项目简介

使用Vue全家桶开发的一个移动端商城项目demo,拥有首页,分类,商品详情,购物车,个人五个页面。后端接口数据来自coderwhy搭建的服务器。

技术栈

  • vue2 用于构建用户界面的渐进式框架
  • vue-router Vue.js 官方的路由管理器
  • vuex 专为 Vue.js 应用程序开发的状态管理模式
  • webpack 静态模块打包工具
  • es6/eslint 采用es6语法,并使用eslint检测语法
  • axios 尤雨溪推荐使用axios来完成ajax请求
  • better-scroll 为移动端(已支持 PC)各种滚动场景提供丝滑的滚动效果

项目构建运行

// clone项目到本地  
git clone [email protected]:5-seasons/supermall.git

// 进入项目根路径
cd supermall

// 安装相关依赖  
npm install (或yarn)

// 修改 "src/network/request.js" 文件中的数据接口baseURL  
const instance = axios.create({
  baseURL: "修改为你的数据接口",
  timeout: 5000
})

// 本地预览  
npm run serve

// 打包文件
npm run build

目标功能

  • tabControl的吸顶效果
  • 高亮显示选中tabControl
  • 根据tabControl动态展示不同类型商品
  • back-top按钮
  • 图片懒加载
  • 响应式布局
  • 下拉加载更多
  • 添加商品到购物车
  • 首页tabControl左滑右滑切换效果
  • 点击图片看全图的效果
  • 购物车页面删除商品
  • 登录注册
  • 支付系统

部分示意图

首页:

2021-03-29 110848.png

image.png

详情页:

image.png

image.png

分类页:

image.png

购物车:

image.png

个人中心:

image.png

致谢:

coderwhy提供项目。

supermall's People

Contributors

5-seasons avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.