Vue.js preliminary advanced Case

Vue.js preliminary advanced case, suitable for advanced vue beginners

Route lazy loading, login judgment before entering the page, return navigation judgment, RestAPI interface use, component packaging, Vuex state packaging, keep-alive page caching, etc.

Travel APP provides professional travel guides for people who like to travel, and strives to enhance the travel experience.

The current function is not complete, and it will be gradually improved in the later period. I hope you forgive me for many problems.

Project technical framework

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

Installation and deployment

1. Download

git clone https://github.com/LeachZhou/lvyou.git

2. Enter the project

cd lvyou

3. Installation dependencies

npm install

4. Run

npm run dev

5. Packaging

npm run build

Features

• Home
• Discover the details page
• Double column details page
• Topic page
• Topic release page
• Dry goods page
• Leaderboard page
• Dry goods details page
• Search page
• Sidebar
• Login Registration Page
• User page
• Feedback page
• Advisory Service
• Logout
• Image lazy loading
• banner switching

Friendly notification: The background data uses leancloud RestAPI. Due to my limited ability, some requests have not been successful. If anyone can solve the problem, please feel free to pull request .

Directory Structure

├─ 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                            // 配置依赖

running result

APP

Software download address The software uses HBuilder for application packaging, and also makes a start page and appIcon

Thanks

• View
• Muse-UI
• leancloud
• vue-awesome-swiper
• vue-lazyload
• HBuilder

END

This is a webapp I made by going deep into the vue system. Since the interface uses leancloud, many functions have not been implemented. Later I want to use node.js to write my own RestAPI, and then improve the components and interface. Welcome everyone STAR!

Download Details:

Author: LeachZhou

GitHub: https://github.com/LeachZhou/lvyou

#vuejs #vue #vue-js #javascript