Code Monkey home page Code Monkey logo

vue-meizi's Introduction

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

安装依赖 friendly-errors-webpack-plugin

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

###目录结构


├── 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(已经star400+)
  • 如果喜欢一定要 star哈!!!(谢谢!!)
  • 如果有意见和问题 请在 lssues提出,我会在线解答。
  • 我年后要离职了 对我感兴趣的可以联系我 简历

vue-meizi's People

Contributors

liangxiaojuan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-meizi's Issues

你这个用的eslint么?

简直坑死了啊,为什么不用simple模式的啊???检查了一下午额,,,话说只要把配置里面的eslint都删了就好了吧?

TypeError: Vue.util.isObject is not a function

TypeError: Vue.util.isObject is not a function
at Lazy.valueFormatter (eval at (app.js:950), :586:26)
at Lazy.add (eval at (app.js:950), :394:40)
at callHook$1 (eval at (app.js:646), :5126:5)
at _update (eval at (app.js:646), :5052:7)
at Array.updateDirectives (eval at (app.js:646), :5033:5)
at invokeCreateHooks (eval at (app.js:646), :4631:22)
at createElm (eval at (app.js:646), :4525:11)
at VueComponent.patch [as patch] (eval at (app.js:646), :4947:7)
at VueComponent.Vue._update (eval at (app.js:646), :2005:19)
at VueComponent.updateComponent (eval at (app.js:646), :2116:10)

跨域问题

兄弟,demo好多接口和图片都出现了跨域问题,不好查看项目效果啊。。

component(resolve) {resolve('12312')}

component(resolve) {
require.ensure(['./components/recommend/recommend.vue'], () => {
resolve(require('./components/recommend/recommend.vue'));
});
},

我不明白为什么还可以这样写,这个resolve 参数是谁传过来的

vue-Meizi安装报错

  1. vue-Meizi-master\src\components\loading\loading.vue 少一个/div

  2. js语法报错 TypeError: Vue.util.isObject is not a function(…)

details.vue有少少问题

在瀑布流每次打开详情页的时候,详情页容器还没等图片加载完就new BScroll(_)导致高度不准确,页面最后面有一些内容滑动不到,希望修复一下,哈哈;

老铁

第一步怎么用cli搭建环境,我想一步一步仿着老铁项目做

lazyloadImg路径写错了,i要大写

src/components/day/day.vue第10行的 import vImg from '../lazyloadimg/lazyimg.vue'



src/components/welfare/welfare.vue的第19行 import vImg from '../lazyloadimg/lazyimg.vue'写错了,

../lazyloadimg/应该写成../lazyloadImg/.

字母i要大写

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.