一步一友,Vue初学者进阶案例

xiaoxiao2021-02-28  69

Lvyou

GitHub地址:https://github.com/zhou1178539345/lvyou

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

项目技术架构

vuevue-routervuexvue-resourcevue-clilesswebpackmuse-uivue-awesome-swipervue-lazyloadleancloud

安装部署

1.下载

git clone 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

鸣谢

VueMuse-UIleancloudvue-awesome-swipervue-lazyload

END

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

转载请注明原文地址: https://www.6miu.com/read-97066.html

最新回复(0)