Git Product home page Git Product logo

comicshare's Introduction

动漫分享及产品售卖平台

项目简介

这是一个用vue2.0开发的关于动漫分享的单页面应用。使用了Vue.js + ES6 + webpack + vue-router + vue-resource等前端最热的技术,采用组件化、模块化的开发方式,实现三大核心模块(动漫资讯、图片分享以及商品购买)。

实现细节

根组件App.vue使用最接近原生APP体验的高性能框架——MUI,实现顶部与尾部的全局样式。

主页Home.vue轮播图使用mint-ui框架,图片地址配置在json文件中,利用v-for指令和vue-resource调用json中的数据,九宫格的展示部分使用了MUI框架。

动漫资讯newslist.vue结合框架,使用父子组件传值完成相互间特定的跳转,相关数据依然是存储在json文件中,利用vue-resource取得对应的数据。

图片分享photolist.vue利用框架实现了图片的懒加载,在缩略图中使用了vue-preview实现了图片的浏览特效。

商品购买goodslist使用HTML 5中localStorage存储本地数据技术,实现购买商品信息的存储以及调用。

技术栈

  • Vue.js:一个前端 MVVM 框架,主要**是双向数据绑定和组件化
  • vue-router:用 Vue.js + vue-router 创建单页面应用,是将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们
  • vue-resource:这是一个 Vue.js 的插件,提供了使用 XMLHttpRequest 或 JSONP 进行Web请求和处理响应的服务
  • webpack:打包 Vue.js 项目代码资源文件
  • MUI:使用最接近原生APP体验的高性能框架
  • Mint-ui:基于Vue.js的移动端组件裤
  • Moment.js:日期处理类库
  • vue-preview:一个Vue.js的插件,实现了图片浏览特效的功能

收获

  1. 对 vue 的组件、指令、路由、模版渲染、事件绑定、计算属性等有了一定掌握
  2. 熟悉了 vue 组件之间的交互、传值
  3. 熟悉了在 vue 项目中使用第三方插件(组件)和库
  4. 熟悉了组件化、模块化的开发思维
  5. 熟悉了 vue-router 控制路由和子路由的方式
  6. 熟悉了 vue-resource 是如何进行web请求和处理响应
  7. 再次熟悉项目开发流程:项目分析设计 -> 项目环境搭建 -> 依赖安装 -> 页面架构设计 -> 组件开发 -> 发布上线

Build Setup

# clone the repo into your disk.
$ git clone https://github.com/cruxf/ComicShare.git

# install dependencies
$ npm install

# serve with hot reload at localhost:8080
$ npm run dev

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.