When I first learned VUE, I searched the source code of vUE’s actual combat project on the Internet, but most of them are simple demo, which is not very helpful for in-depth study of VUE. Most of the rest are demonstration projects like music player, and the interaction is not as complex as expected. However, in our actual work, we often encounter projects with shopping carts. Because these projects involve money, they have high requirements for logical rigor and complex interaction between pages, accompanied by login, registration, user information, etc., which often make us very headache. Since no one has written a project like this in Vue, I will write it and open source will help those who can see it.

This kind of functional project is practical but often boring. It’s not as flashy as a music player. It’s a good source for thinking about ele. me, because it’s complicated enough that an open delivery platform is more complicated than a typical company-owned store. Second, seeing so many delicious foods, people will not feel bored.

Why ele. me instead of Baidu and Meituan? The reason is simple, of the three delivery giants, Ele. me has the most beautiful color and layout, and looks the most comfortable.

This project has a total of 45 pages, involving registration, login, commodity display, shopping cart, order and so on, which is a complete process. The average company even the website of the single page project is not so complex, if this project can be managed, I believe that most of the company’s other single page application is not a problem, even if more complex, will not be higher than this.

It took more than 2 months for the project to complete from zero layout. Now the project has been completed, and some performance optimization is being carried out, and detailed notes are being added.

In addition, this project has nothing to do with ele. me, the mooC project has only one page. I wrote this project directly after reading the official document of VUE without referring to anyone’s code.

Note: This project is purely personal, please choose ele. me official client for normal order.

Technology stack

vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg

Project running

Note: NodeJS must be at least version 6.0 due to the large number of es6/7 and other new properties involved. Node 7 is a beta and can cause problems. Use Stable Node 6 

git clone https://github.com/bailicangdu/vue2-elm.git  

cd vue2-elm

npm install

Copy the code

Compile environment

NPM run dev goes to http://localhost:8088Copy the code

The online version

The ELM folder generated by NPM run build can be accessed on the serverCopy the code

instructions

The purpose of this project is to familiarize yourself with how to construct a large project with VUe2

If it is helpful, you can click “Star” in the upper right corner to support it. Thank you! ^_^

Or you can “follow” and I will open source more interesting projects

Development environment macOS 10.12.3 Chrome 55

Special thanks to Sister Chen for taking time out of her busy schedule to complete this project with me, so hard

If you have any questions, please directly raise them in Issues, or if you find problems and have a good solution, welcome PR

React + Redux is an open source project for people interested in React. The address is here

Another vue2 + Vuex starter, much simpler than the current one, is perfect for getting started. The address is here

Description of demo and data

1, download the code after the operation, because open the reverse proxy, can obtain the real official data, finally can place the order (the real order, rather than simulation, can be in the official App to view and order after payment, personally tried, and successful payment order), but to be on the safe side, log into the account for fixed account, so as not to reveal personal information, But you can still order.

2. The demo data is the simulated fixed data and is only used as an effect demonstration, because the reverse proxy must run the code on the PC side.

Results demonstrate

(Demo uses simulated data, data is fixed, only as a style demonstration, to get real data, please clone code and run);

To view the demo, please click here.

Scan the qr code below on the mobile terminal

The target function

  • Location function — done
  • Choose the city — done
  • Search for address – done
  • Displays a list of businesses near the selected address — done
  • Search for food, restaurants — done
  • Sort and filter by distance, sales, ratings, specials, delivery methods, etc. — done
  • Restaurant food list page — Done
  • Shopping cart functionality — done
  • Store review page — done
  • Individual food detail page – done
  • Business details page — done
  • Log in, register — done
  • Change password – Done
  • Personal center — Done
  • Send SMS, voice authentication — done
  • Order function — done
  • Order list — done
  • Order details — Done
  • Download the App — done
  • Add, delete, modify shipping address — done
  • Account information — done
  • Service center — done
  • Red envelope — Done
  • Upload profile picture — done
  • Payment – I can’t do it

conclusion

1. Because it is not the official ELM, and because the agent is to be opened, it must be opened on the PC side, so it can only place an order at most. After placing an order, you can check and make payment on the mobile client.

2, generally involves money page logic are complicated, especially like hungry? An open platform, merchants and there are many different kinds of food, a complex interaction between pages and pages, on a lot of data of writes to the shopping cart and order function and logic once let a person very hard, and no design and interface API documentation, can only step by step.

3. Vue performs well in small and medium-sized projects due to its lightweight framework, and still performs well in large single-page applications due to the presence of VUex, which is indispensable when dealing with complex interactive logic. So you can do large single-page projects with VUE + Vuex.

4, project to now, from land to register, homepage, search, businesses, shopping cart, order, order list, the individual center A process to go after, not only the understanding of the vue, a deeper level and to control after big projects are very much help, can do a practical project has great improvement in myself.

At one time, I doubted whether it was meaningful to spend a few months on such a project. I just wanted to do a small project to practice, but LATER I wrote more and more, but I believed that everything was worth it.

6. The project has been completed with 45 pages in total.

The ultimate goal

1. Use Node.js to build a background system simulating the takeout platform. (Production has begun)

2. Use React-Native to write native APP versions across Android and IOS.

3, if the time comes, there will be a PC side of the web version.

So my goal is to build a complete ecosystem across the front and back end, mobile IOS, Android.

. Stay tuned for

Part of the screenshot

City list page

Search address page

Shop List page

Shop Filter page

Restaurant food list with shopping cart

Order confirmation page

Search page

Landing page

Personal center

Project layout

| - build / / webpack configuration file | - config / / package path | - elm / / online project files, On the server can be normal access | - screenshots screenshots | - SRC / / / / project source directory | | - components / / component | | - common / / common components | | -- buyCart. Js / / Shopping cart component | | - loading. Js / / page to initialize the load data of animation component | | -- mixins. Js / / mixed components (including: Instruction - drop down to load more, Processing image address) | | - ratingStar. Js / / comment on five stars component | | -- shoplist. Js / / msite list of restaurants and shop page common components | | - at the bottom of the footer / / common components | | - the header / / head common components | | - config / / basic configuration | | -- env. Js/switch/environment configuration | | -- fetch. Js / / get data | | -- mUtils. Js / / js methods | | -- rem. Js / / Px conversion rem | | - images / / public image | | - pages | | - balance / / balance page | | - children | | - the detail / / balance that | | | - practice / / red envelope page | - children | | - commend / / recommended prize | | - coupon / / vouchers that | | - exchange/change/red packets | | - hbDescription / / red envelope that | | - hbHistory / / History red packets | | - city / / the current city page | | - food / / food selection sort pages | | - confirmOrder / / make sure the order page | | - children | | | - invoice invoice / / selection page | - remark / / order page note | | - payment / / payment page | | - userValidation / / user authentication page | | - chooseAddress / / select address page | | - children | | - addAddress / / add address page | | - children | | - searchAddress / / search address page | | - download / / download App | | - find / / find page | | - forget // Forget the password, Change password page | | | - / home/front page | - login / / landing page registration | | | - msite / / shops list page | | - order / / order list page | - children | | - named orderDetail / / The order details page | | - points / / integral page | | - children | | - the detail instructions / / integral | | | -- - profile / / personal center | - children | | - the balance of the balance / / I | | - practice / / my preferential | | - info / / account information | | - children | | | - address / / add address | - children | | - add / / new address | | - children | | - addDetail / / search address | | - points / / my integral | | - setusername / / reset user name | | - search / / search page | | - service / / service center | | - children | | - questionDetail / / the problem details | | - shop/store selection page | | - children | | - foodDetail / / shops information page | | | - shopDetail / / a single store information page | - children | | - shopSafe / / stores authentication information page | | - vipcard / / membership card is dealt with page | | - children | | - invoiceRecord/record/buy | | - useCart / / use the card to buy | | - vipDescription / / member that | | | - plugins / / reference plugin | | | - the router routing configuration / / | | | - service / / data interaction unified deployment of | | - The template / / development stage of the temporary data | | -- getData. Js / / get data unification deployment file, The interface for unified management | | | - store / / vuex state management | | - modules / / store module | | - action. The js / / configuration actions | | -- getters. Js getters / / configuration . | | - index js / / reference vuex, Create store | | - mutation - types. Js / / define constants muations name | | -- mutations. Js / / configuration mutations | | | - style / / all kinds of style file | | - Common. SCSS / / public style file | | -- mixins. SCSS / / style profile | | | -- App. Vue / / the entry file | | | -- main. Js / / program entry documents, Load a variety of common components | | -. Babelrc / / ES6 grammar compiler configuration. | - editorconfig/specification/code. | - gitignore / / ignore file | -- the favicon. Ico / / small icon | - left upper corner of the page Index.html HTML file | -- package. / / entrance json / / project and tool depends on the configuration file | -- README. Md / / instructionsCopy the code

Did this article help you? Welcome to join the front End learning Group wechat group: