CNode

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

分享
Lliangxiaojuan发布于10 年前最后回复8 年前6 回复6834 浏览0 收藏

vue-Meizi

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

###首先


  • 喜欢的请点心,关注,star ,fork,这些是我坚持下去的动力
  • demo地址 demo (请用chrome的手机模式预览)
  • 手机扫一扫

项目二维码.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

mac环境 安装依赖 friendly-errors-webpack-plugin

npm install friendly-errors-webpack-plugin --save-dev

###目录结构


###实现的功能


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

正在实现的功能


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

最后


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

回复 (6)

L
liangxiaojuan#1·9 年前

M
MrShenSH#2·9 年前

不错👌 From Noder

2
2596887568#3·8 年前

谢谢分享,分享一个Vue.js的入门级全家桶教程:

1.vue.js 入门与提高: http://xc.hubwiz.com/course/vue.js

2.vuex 2 入门与提高: http://xc.hubwiz.com/course/vuex

3.vue-router 入门与提高: http://xc.hubwiz.com/course/vuerouter

4.vue.js 工程化实践: http://xc.hubwiz.com/course/vuegch

L
liangxiaojuan#4·10 年前

J
JustforNode#5·10 年前

very good!

B
beyondouyuan#6·10 年前

顶 From Noder

参与回复
登录后即可参与回复。登录