Code Monkey home page Code Monkey logo

lvyou's Introduction

Lvyou (现由于leancloud问题,无法查看线上demo)

Backers on Open Collective Sponsors on Open Collective npm npm npm npm npm

Vue.js 初步进阶案例,适合vue入门者进阶

路由懒加载,进入页面前登录判断,返回导航判断,RestAPI接口使用,组件封装,Vuex状态封装,keep-alive页面缓存等

旅游APP,为喜欢旅游的人专业提供旅游攻略,致力提升旅游体验。

目前功能不全,后期会慢慢完善,诸多问题,还望各位见谅。

项目技术架构

  • vue
  • vue-router
  • vuex
  • vue-resource
  • vue-cli
  • less
  • webpack
  • muse-ui
  • vue-awesome-swiper
  • vue-lazyload
  • leancloud

安装部署

1.下载

git clone https://github.com/LeachZhou/lvyou.git

2.进入项目

cd lvyou

3.安装依赖

npm install

4.运行

npm run dev

5.打包

npm run build

功能

  • 首页
  • 发现详情页
  • 双列详情页
  • 话题页
  • 话题发布页
  • 干货页
  • 排行榜页
  • 干货详情页
  • 搜索页
  • 侧滑栏
  • 登录注册页
  • 用户页
  • 反馈信息页
  • 咨询客服
  • 注销
  • 图片懒加载
  • banner切换

友情告知:后台数据采用leancloud RestAPI,因本人能力有限,一些请求未能请求成功,如果有人能够解决问题,欢迎随时pull request

目录结构

├─ build                                   // webpack配置文件
├─ config                                  // 项目设置
├─ docs                                    // 项目部署文件
├─ src
│  ├─ assets                               // 静态文件
│  │  ├─ css                               // 公共css
│  │  └─ image                             // 图片文件
│  ├─ components                           // 页面
│  │  ├─ public                            // 公共组件
│  │  │  ├─ addButton.vue                  // 话题页发布评论按钮组件
│  │  │  ├─ backBar.vue                    // 返回顶部栏组件
│  │  │  ├─ list.vue                       // 列表组件
│  │  │  ├─ publicFooter.vue               // 底部导航栏
│  │  │  ├─ publicHeader.vue               // 头部导航栏
│  │  │  ├─ publicTitle.vue                // 公共标题栏
│  │  │  ├─ spinner.vue                    // 加载组件
│  │  │  ├─ swiper.vue                     // 首页banner组件
│  │  │  └─ topicBanner.vue                // 话题banner组件
│  │  ├─ detailPage.vue                    // 首页详情页
│  │  ├─ editPage.vue                      // 发布评论页
│  │  ├─ feedBack.vue                      // 反馈页
│  │  ├─ goods.vue                         // 干货页
│  │  ├─ goodsCharts.vue                   // 排行榜页
│  │  ├─ goodsDetailPage.vue               // 干货详情页
│  │  ├─ index.vue                         // 首页
│  │  ├─ indexFourFour.vue                 // 首页双列详情页4
│  │  ├─ indexFourOne.vue                  // 首页双列详情页1
│  │  ├─ indexFourThree.vue                // 首页双列详情页3
│  │  ├─ indexFourTwo.vue                  // 首页双列详情页2
│  │  ├─ login.vue                         // 登录页
│  │  ├─ search.vue                        // 搜索页
│  │  ├─ test.vue                          // 测试页(备用)
│  │  ├─ topic.vue                         // 话题页
│  │  └─ user.vue                          // 用户页
│  ├─ router
│  │  └─ index.js                          //路由配置
│  ├─ vuex
│  │  └─ store.js                          // vuex配置
│  ├─ App.vue                              // 页面入口文件
│  └─ main.js                              // 程序入口文件
├─ static                                  // 静态文件
├─ .babelrc                                // ES6语法编译配置
├─ .editorconfig                           // 代码编写规格配置
├─ .gitignore                              // git 忽略项
├─ .postcssrc.js
├─ LICENSE                                 // 许可证
├─ README.md                               // README
├─ index.html                              // html模板
└─ package.json                            // 配置依赖

运行效果

这里写图片描述

这里写图片描述

这里写图片描述

APP

软件下载地址 软件使用HBuilder进行应用打包,另外制作了启动页和appIcon

这里写图片描述

鸣谢

  • Vue
  • Muse-UI
  • leancloud
  • vue-awesome-swiper
  • vue-lazyload
  • HBuilder

END

这是本人深入vue系统所制作的一个webapp,由于接口使用的是leancloud,很多功能没有实现,后期想用node.js自己写RestAPI,再完善组件和界面。欢迎大家STAR!

Contributors

This project exists thanks to all the people who contribute.

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

lvyou's People

Contributors

monkeywithacupcake avatar shaobeichen 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

lvyou's Issues

关于keepAlive

看了下你的router配置,页面好像都设置了keepAlive缓存,那么你有些页面如果要重新取数据,此vue文件就需要在 activated 钩子中重新this.$http请求

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.