Vue.js开源-Lvyou: 初步进阶案例,适合入门者进阶的旅游 App
qwe083715
7年前
<p style="text-align:center"><img src="https://simg.open-open.com/show/217e06b7905c18ef45ca3096b3a3932c.png"></p> <h2>Lvyou</h2> <p>Vue.js 初步进阶案例,适合vue入门者进阶</p> <p>路由懒加载,进入页面前登录判断,返回导航判断,RestAPI接口使用,组件封装,Vuex状态封装,keep-alive页面缓存等</p> <p>旅游APP,为喜欢旅游的人专业提供旅游攻略,致力提升旅游体验。</p> <p>目前功能不全,后期会慢慢完善,诸多问题,还望各位见谅。</p> <h3>项目技术架构</h3> <ul> <li>vue</li> <li>vue-router</li> <li>vuex</li> <li>vue-resource</li> <li>vue-cli</li> <li>less</li> <li>webpack</li> <li>muse-ui</li> <li>vue-awesome-swiper</li> <li>vue-lazyload</li> <li>leancloud</li> </ul> <h3>安装部署</h3> <p>1.下载</p> <pre> git clone https://github.com/zhou1178539345/lvyou.git</pre> <p>2.进入项目</p> <pre> cd lvyou</pre> <p>3.安装依赖</p> <pre> npm install</pre> <p>4.运行</p> <pre> npm run dev</pre> <p>5.打包</p> <pre> npm run build</pre> <h3>线上预览</h3> <p><a href="/misc/goto?guid=4959750669208009113" rel="nofollow,noindex">线上预览地址</a></p> <p>友情提示:建议在开发者模式适配下浏览网站</p> <h3>功能</h3> <ul> <li>首页</li> <li>发现详情页</li> <li>双列详情页</li> <li>话题页</li> <li>话题发布页</li> <li>干货页</li> <li>排行榜页</li> <li>干货详情页</li> <li>搜索页</li> <li>侧滑栏</li> <li>登录注册页</li> <li>用户页</li> <li>反馈信息页</li> <li>咨询客服</li> <li>注销</li> <li>图片懒加载</li> <li>banner切换</li> </ul> <p>友情告知:后台数据采用leancloud RestAPI,因本人能力有限,一些请求未能请求成功,如果有人能够解决问题,欢迎随时 <a href="/misc/goto?guid=4959750669304516650" rel="nofollow,noindex">pull request</a> 。</p> <h3>目录结构</h3> <pre> ├─ 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 // 配置依赖</pre> <h3>运行效果</h3> <p><img src="https://simg.open-open.com/show/01aa2e2c87bb5269b3b8bf30a0542405.png"></p> <p><img src="https://simg.open-open.com/show/653c81f1371ac10889eaa3cee44a0276.png"></p> <p><img src="https://simg.open-open.com/show/784f1b40769a052389b2bb2421471526.png"></p> <h3>APP</h3> <p><a href="/misc/goto?guid=4959750669386892538" rel="nofollow,noindex">软件下载地址</a> 软件使用Hbuild进行应用打包,另外制作了启动页和appIcon</p> <p> </p> <h3>鸣谢</h3> <ul> <li>Vue</li> <li>Muse-UI</li> <li>leancloud</li> <li>vue-awesome-swiper</li> <li>vue-lazyload</li> <li>Hbuild</li> </ul> <h3>END</h3> <p>这是本人深入vue系统所制作的一个webapp,由于接口使用的是leancloud,很多功能没有实现,后期想用node.js自己写RestAPI,再完善组件和界面。欢迎大家STAR!</p> <p>项目主页:<a href="http://www.open-open.com/lib/view/home/1499955889379">http://www.open-open.com/lib/view/home/1499955889379</a></p> <p> </p> <p> </p> <p> </p>