vue实战项目,vue2 + vuex + vue-router+ webpack + es6
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea
build
config
src
static/css
.babelrc
.editorconfig
.postcssrc.js
README.md
index.html
package.json
项目总结.md

README.md

本项目是基于vue2最新实战项目,实现了移动端使用最多的无限滚动,侧滑导航,卡片布局,图片懒加载,左右滑动。

首先


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

项目二维码

项目技术架构


  1. vue
  2. vue-router
  3. vuex
  4. vue-infinite-scroll
  5. axois
  6. vue-awesome-swiper
  7. vue-cli
  8. vuejs-templates/webpack
  9. vue-lazyload

上图


侧滑导航

瀑布流布局,无限滚动,图片懒加载

左右滑动,左右切换

卡片布局,标题溢出省略显示

安装


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

npm install

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

npm run dev

发布代码

npm run build

###目录结构


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

实现的功能


  • 瀑布流布局
  • 无限滚动
  • 上拉加载
  • 侧边导航
  • 图片懒加载
  • 左右滑动切换
  • 路由跳转返回自动定位
  • 等等

正在实现的功能


  • 搜索
  • 我的收藏
  • 登录
  • 等等

最后


  • 我的另一个vue实战项目在线聊天室vue-chatroom
  • 如果喜欢一定要 star哈!!!(谢谢!!)
  • 如果有意见和问题 请在 lssues提出,我会在线解答。