vue-meizi

本项目是基于vue2最新实战项目,是适合新手进阶的绝佳教程。代码简单易懂,注释多多。实现了移动端使用最多的 无限滚动,图片加载,左右滑动,等待。先发布预览版本,后面更多更全的功能和教程将会陆续发出。

首先


感谢gank.io提供的api接口
喜欢的请点心,关注,star ,fork,这些是我坚持下去的动力
demo地址 demo (请用chrome的手机模式预览)
本项目地址github地址
手机扫一扫

项目二维码.png

项目技术架构


  • vue-cli
  • vue
  • vue-resource
  • vue-router
  • vuex
  • vue-awesome-swiper
  • vue-infinite-scroll
  • stylus
  • webpack

上图


  • 侧滑导航

    1.gif
  • 瀑布流布局,无限滚动,图片懒加载

2.gif
  • 左右滑动,左右切换

3.gif

安装


项目地址:(git clone

git clone https://github.com/liangxiaojuan/vue-Meizi.git

通过npm安装本地服务第三方依赖模块(需要已安装Node.js)

npm install

启动服务(http://localhost:9090)

npm run dev

发布代码

npm run build

安装注意

安装 vue-cli

npm install -g vue-cli

安装 vue-cli eslint

npm install -g eslint

目录结构


├── build              // 构建服务和webpack配置
├── config // 项目不同环境的配置
├── dist // 项目build目录
├── index.html // 项目入口文件
├── package.json // 项目配置文件
├── src // 生产目录
│ ├── assets // 图片资源
│ ├── common // 公共的css js 资源
│ ├── components // 各种组件
│ ├── App.vue // 主页面
│ ├── vuex // vuex状态管理器
│ ├── router.js // 路由配置器
│ └── main.js // Webpack 预编译入口

实现的功能


  • 瀑布流布局
  • 无限滚动
  • 侧边导航
  • 图片懒加载
  • 左右滑动切换
  • 等等

正在实现的功能


  • 上拉加载
  • 搜索
  • 我的收藏
  • 登录
  • 等等

最后


  • 我的另外一个开源项目饿了么app(已经star300+)
  • 如果喜欢一定要 star哈!!!(谢谢!!)
  • 如果有意见和问题 请在 lssues提出,我会在线解答。

[vue最新实战] gank客户端(vue2 + vue-router2 + vuex +webpace + es6)新手福利,干货多多的更多相关文章

  1. 极客时间-vue开发实战学习(ant-design vue作者)

    vue基础 属性 事件 插槽 指令(Directives) 生命周期 底层原理 vue生态 路由管理器vue Router 状态管理器vuex 同构Nuxt vue实战 实战项目-ant-desing ...

  2. Vue.js 实战教程(附demo)

    在实战之前,你需要对vuejs的基础语法有一定的了解,可以通过以下几个途径进行学习: vue.js官方文档:https://cn.vuejs.org/v2/guide/index.html vue.j ...

  3. 08Vue.js快速入门-Vue综合实战项目

    8.1. 前置知识学习 npm 学习 官方文档 推荐资料 npm入门 npm介绍 需要了解的知识点 package.json 文件相关配置选项 npm 本地安装.全局安装.本地开发安装等区别及相关命令 ...

  4. vue前端实战注意事项

    1. vue前端实战注意事项 1.1. 预备 1.1.1. Eslint 这是个语法检查工具,我用webstorm作为开发的ide,这个语法检查还是太严格了,一个空格啥的都会报错,对新手来讲还是建议关 ...

  5. electron聊天室|vue+electron-vue仿微信客户端|electron桌面聊天

    一.项目概况 基于Electron+vue+electron-vue+vuex+Nodejs+vueVideoPlayer+electron-builder等技术仿制微信电脑端界面聊天室实例,实现消息 ...

  6. Vue.js 实战总结

    最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑.本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来与大家分享,欢迎多多交流. Vue.js ...

  7. webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

  8. vue.js实战——购物车练习(包含全选功能)

    vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...

  9. vue实战记录(二)- vue实现购物车功能之创建vue实例

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(二) GitHub:sue ...

随机推荐

  1. [转]于Fragment和Activity之间onCreateOptionsMenu的问题

    Fragment和Activity一样,可以重写onCreateOptionsMenu方法来设定自己的菜单,其实这两个地方使用onCreateOptionsMenu的目的和效果都是完全一样的,但是由于 ...

  2. 如何获取url访问历史记录

    在院里的群里,有人问了这么一个问题: A页面提交表单到B页面,然后在B页面点了后退,如果在A页面上判断是直接访问的还是后退进去的呢?我不想改B页面. 于是乎本着热心人的想法,我就帮他搞了搞,首先我想到 ...

  3. C# 经典入门15章 RichTextBox

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsEAAAIRCAIAAAAk7fcMAAAgAElEQVR4nOy9+SOU3/////pHuswYyz

  4. 我也谈javascript闭包

    1.什么是闭包呢?Whenever you see the function keyword within another function, the inner function has acces ...

  5. 我也谈javascript正则匹配

    一.javascript 正则全局匹配 g 慎用test()方法 来个例子: var a = /^[a-z]+/gi; a.test('bb123'); //true a.lastIndex ; // ...

  6. map map

    下面的无法运行. @Override protected void map(LongWritable key, Text value, Mapper<LongWritable, Text, Te ...

  7. HDU 5512 Pagodas

    2015 ACM / ICPC 沈阳现场赛 D 题 找了一小时规律......发现是个GCD. #include<cstdio> #include<cstring> #incl ...

  8. [数据结构]Splay简介

    Splay树,又叫伸展树,可以实现快速分裂合并一个序列,几乎可以完成平衡树的所有操作.其中最重要的操作是将指定节点伸展到指定位置, 目录 节点定义 旋转操作 伸展操作 插入操作 删除操作 lower_ ...

  9. 解决Ubuntu系统中文乱码显示问题,终端打开文件及查看目录

    解决Ubuntu系统中文乱码显示问题 [日期:2014-02-20] 来源:Linux社区  作者:njchenyi [字体:大 中 小]   我是先安装了Ubuntu 12.04 Server,然后 ...

  10. dedecms自定义表单