vue girls

vue-girls

This project is based on the latest practical project of vue2, which implements infinite scrolling, image loading, left and right sliding, etc. which are most commonly used on mobile terminals.

###first

---

• This project address github address

Project technical architecture

---

• vue-cli
• vue
• vue-resource
• vue-router
• vuex
• vue-awesome-swiper
• vue-infinite-scroll
• stylus
• webpack

### Above picture

• Waterfall flow layout, infinite scrolling, lazy loading of images

• Swipe left and right, switch left and right

###Install

---

Project address: git clone )

git clone https://github.com/xiaoyaopai/vue-Meizi.git

Install local service third-party dependency modules through npm (requires Node.js to be installed)

 npm install

Start the service (http://localhost:9090)

 npm run dev

Release code

 npm run build

Installation notes

Install vue-cli

 npm install -g vue-cli

Install vue-cli eslint

 npm install -g eslint

Install dependencies friendly-errors-webpack-plugin

 npm install friendly-errors-webpack-plugin --save-dev

###Directory structure

---

 ├── build // Build service and webpack configuration ├── config // Configuration of different project environments ├── dist // Project build directory ├── index.html // Project entry file ├── package.json // Project configuration file ├── src // Production directory │ ├── assets // Image resources │ ├── common // Public css js resources │ ├── components // Various components │ ├── App.vue // Main page 
│ ├── vuex // vuex state manager │ ├── router.js // Router configurator │ └── main.js // Webpack precompiled entry

###Function implemented

---

• waterfall flow layout
• infinite scroll
• Side navigation
• Lazy loading of images
• Slide left or right to switch
• etc.