Vue. Js preliminary advanced case, suitable for Vue beginners advanced tourism APP, professional tourism guide for people like tourism, is committed to improving the tourism experience. At present, the function is not complete, and it will be gradually improved in the later stage. I hope you will forgive me for many problems.

Project technical framework

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

Install the deployment

1. Download

git alone https://github.com/zhou1178539345/lvyou.git
Copy the code

2. Enter the project

cd lvyou
Copy the code

3. Install dependencies

npm install
Copy the code

4. Run

npm run dev
Copy the code

5. Packaging

npm run build
Copy the code

The online preview

Online preview address

Friendly tip: it is recommended to browse the site under developer mode adaptation

function

  • Home page
  • Discovery Details page
  • Double column details page
  • Topic page
  • Topic publishing page
  • Dry page
  • List page
  • Dry cargo details page
  • Search page
  • The side bar
  • Login registration page
  • The user page
  • Feedback page
  • Consulting service
  • The cancellation
  • Lazy loading of images
  • Banner switch

Note: Background data uses leanCloud RestAPI. Due to my limited ability, some requests cannot be successfully requested. If someone can solve the problem, please feel free to pull request.

The directory structure

├─ ├─ SRC │ ├─ assets │ ├─ CSS │ ├─ public │ ├─ image │ ├─ build │ ├─ config │ ├─ SRC │ ├─ assets │ ├─ CSS │ ├─ image / / image file │ ├ ─ components / / page │ │ ├ ─ public / / common components │ │ │ ├ ─ addButton. Vue/page/topic post a comment button component │ │ │ ├ ─ backBar. Vue / / Go to the top bar │ │ ├─ ├─ List. vue │ │ │ ├─ Public Flag │ │ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├. Vue // publicTitle bar │ │ ├─ ├─ ├.vue // publicTitle bar │ │ ├─ ├─ ├─ ├.vue // │ │ ├─ Bass Exercises - DetailPage. vue │ │ ├─ Detailpage. vue │ │ ├─ Goods. vue │ │ ├─ Heavy Metal Guitar School. Vue │ │ ├─ Heavy Metal Guitar School. Vue │ │ ├─ Heavy Metal Guitar School │ │ ├─ ├─ Vue // │ ├─ Vue // │ ├─ Vue // │ ├─ Vue // │ ├─ Vue // │ ├─ Vue // │ ├─ Vue // │ ├─ Vue // │ ├─ Vue // │ ├─ Vue // │ ├─ Vue // ├─ ├─ ├─ ├─ vue // │ ├─ ├─ vue // │ ├─ ├─ vue // │ ├─ ├─ vue // │ ├─ ├─ vue // │ ├─ ├─ vue // │ ├─ ├─ vue // │ ├─ ├─ vue // │ ├─ ├─ vue // │ ├─ ├─ vue // │ ├─ ├─ vue // │ ├─ ├─ │ ├─ ├─ ├─ ├─ ├─ vue // │ ├─ ├─ vue // │ ├─ ├─ vue // │ ├─ ├─ vue // │ ├─ ├─ vue // │ ├─ ├─ vue // .js // program entry file ├─ static // Static file ├─.babelrc // ES6 syntax compilation Configure ├─.editorConfig // code compilation specification Configure ├─.gitignore // git Ignore item ├─ ├─ ├─ ├─ index.html // HTML Template package.json //.postcsrc.js ├─ LICENSE // LICENSE ├─ index.html // README ├─ index.html // HTML Template Package. json //Copy the code

Running effect

APP

The software uses Hbuild to package the application, and also makes the startup page and appIcon

thanks

  • Vue
  • Muse-UI
  • leancloud
  • vue-awesome-swiper
  • vue-lazyload
  • Hbuild

END

This is a WebApp made by myself in the VUE system. As the interface uses LeanCloud, many functions have not been realized. In the future, I want to write RestAPI by myself with Node.js, and then improve the components and interface. Welcome STAR!