vue2-elm

# Project Overview This is a large-scale single-page application (SPA) example written in vue2 + vuex, using Ele.me delivery scenarios as the theme. The README indicates the author built the layout and logic from scratch in their spare time over approximately two months. The project aims for complete functionality and complex logic rather than being a simple demo. The author notes that this project is unrelated to the Ele.me course on Imooc and is purely for personal practice; official clients should be used for real orders. # Tech Stack vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg. The README notes that Node 6.0 or higher is required due to the extensive use of ES6/7 features. # Running the Project ``` git clone https://github.com/bailicangdu/vue2-elm.git cd vue2-elm npm install or yarn (recommended) npm run dev ``` # API Data and Related Projects All interface data comes from the companion backend system, node-elm. To experience full-stack development, download the backend system and use the command `npm run local` instead of `npm run dev`. Additionally, a backend management page, vue2-manage, built with element-ui is provided. These can be ignored if focusing solely on frontend development. The README also mentions that the preview address and APIs require HTTPS access. # Implemented Features - Positioning - City selection - Address search - Merchant list near the selected address - Food and restaurant search - Sorting and filtering by distance, sales, ratings, specialties, delivery methods, etc. - Restaurant food list page - Shopping cart functionality - Shop review page - Individual food detail page - Merchant detail page - Login and registration - Password modification - Personal center - SMS and voice verification - Ordering functionality - Order list - Order details - App download - Add, delete, and modify shipping addresses - Account information - Service center - Red envelopes (coupons) - Avatar upload Unimplemented features: Payment (marked in the README as "beyond my capabilities"). # Project Structure The source code is located in the src directory, containing: components (common, footer, header components like dialogs, carts, countdowns, loading animations, star ratings, restaurant lists), config (env.js for environment switching, fetch.js for data fetching, mUtils.js for common methods, rem.js for unit conversion), images, page (business-specific directories like balance, benefit, city, confirmOrder, download, find, food, forget, home, login, msite, order, points, profile, search, service, shop, vipcard), plugins, router, service (getData.js for unified API management, tempdata for temporary data), store (vuex actions, getters, index, modules, mutation-types, mutations), and style (common.scss, mixin.scss, swiper.min.css). The root directory also includes build (webpack config), config (bundle paths), elm (production files), screenshots, App.vue, main.js, and index.html. The README counts 56 directories and 203 files. # Author's Summary and Future Goals The README mentions that web logic involving money is complex, with many merchants and food categories and intricate page interactions. Handling data and logic for the shopping cart and ordering was particularly challenging, especially without design or API documentation. The author believes Vuex is indispensable for handling complex interaction logic and that vue + vuex is fully capable of building large SPA projects. Future goals include building a simulated delivery platform backend with node.js, creating a native app version for Android and iOS, and potentially a seller version if time permits. # Demo and License The README provides an online demo address (recommended for preview in Chrome's mobile mode) and a mobile QR code, along with screenshots of the shop list, filtering, food list/cart, order confirmation, search, login, and personal center pages. Project communication is available via Gitter groups or through Issues/PRs. The license is GPL.