Vue.js開源－Lvyou： 初步進階案例，適合入門者進階的旅游 App

Lvyou

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/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！

項目主頁：http://www.baiduhome.net/lib/view/home/1499955889379