Code Monkey home page Code Monkey logo

m-bookstore-v1.5's Introduction

m-bookstore-v1.5

用vue.js v1.026搭建的移动端书城,如果对您有帮助的话请star,如果有问题可以提issues,欢迎fork和pr来改善代码质量。本项目的构思源于慕课网实战,但却完全是由我个人进行项目构架,技术选型,组件划分,除了构思是参考了一下以外,技术开发完全是我一个人完成的。整体的项目开发流程在下面,此项目源于个人过年时和自己打了一个赌,想看一下自己在有规范的前提下用多少时间可以做完一个项目,结果还是花了差不多一周时间,看来还是有不少进步空间。

Build Setup

# 安装依赖包
npm install

# 启动热加载服务器运行在 localhost:5000
npm run dev

# 打包成生产环境压缩文件
npm run build

项目开发流程

  1. 开发平台的搭建,一般靠手脚架工具完成,基本包括lint库,简易服务器模拟真实线上环境(完成)
  2. mock数据的导入,开发模拟真实线上的api接口,并测试api是否成功返回响应(完成)
  3. 确定页面分层结构,编写主页面骨架,编写路由,测试路由跳转(完成)
  • 主页面
  • 免费专区
  • 女生频道
  • 男生频道
  • 分区页面
  • 书籍详情页
  1. 在页面编写api调用接口,调试是否成功获取响应(完成)
  2. 确定可复用的组件,编写可复用组件的结构与样式
  • top (二级页面的顶部导航)
  • group-header (主区块的通用头部)
  • book-table (主区块的内容区,一行三本书并排)
  • book-list (主区块的内容区,每行一本书简介)
  • group-footer (主区块的通用脚部)
  1. 在页面导入组件,编写页面中其余的结构与样式(完成)
  • main (完成)
  • free (完成)
  • girl (完成)
  • boy (完成)
  • category (JSON数据不完整,放弃)
  • book (完成)
  1. 编写交互事件(完成)
  • 页面跳转
  • 切换书籍
  • 瀑布流加载更多
  1. 编写动画
  • 组件入场出场动画
  • 广告轮播
  1. 联调测试部署上线

m-bookstore-v1.5's People

Contributors

moling3650 avatar

Watchers

James Cloos 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.