Vue.js开源-Lvyou: 初步进阶案例,适合入门者进阶的旅游 App

qwe083715 4年前
   <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>