Lvyou

Vue.js 初步进阶案例，适合vue入门者进阶 旅游APP，为喜欢旅游的人专业提供旅游攻略，致力提升旅游体验。 目前功能不全，后期会慢慢完善，诸多问题，还望各位见谅。

项目技术架构

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

安装部署

1.下载

git alone https://github.com/zhou1178539345/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

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

鸣谢

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

END

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