इस प्रोजेक्ट के बारे में

# प्रोजेक्ट ओवरव्यू यह vue2 + vuex का उपयोग करके बनाया गया एक बड़ा सिंगल पेज एप्लिकेशन उदाहरण है, जिसे 'Ele.me' फूड डिलीवरी परिदृश्य के आधार पर बनाया गया है। README के अनुसार, लेखक ने इसे शून्य से शुरू करके लगभग दो महीनों में पूरा किया। यह प्रोजेक्ट एक साधारण डेमो के बजाय कार्यात्मक पूर्णता और जटिल लॉजिक वाले व्यावहारिक अभ्यास के रूप में तैयार किया गया है। लेखक ने स्पष्ट किया है कि यह प्रोजेक्ट Mooc.com के Ele.me कोर्स से संबंधित नहीं है और केवल व्यक्तिगत अभ्यास के लिए है; वास्तविक ऑर्डर के लिए आधिकारिक क्लाइंट का उपयोग किया जाना चाहिए। # तकनीकी स्टैक vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg। README में उल्लेख है कि बड़ी संख्या में ES6/7 विशेषताओं के कारण, node का संस्करण 6.0 से ऊपर होना चाहिए। # प्रोजेक्ट रन करना ``` git clone https://github.com/bailicangdu/vue2-elm.git cd vue2-elm npm install या yarn (अनुशंसित) npm run dev ``` # इंटरफ़ेस डेटा और सहायक प्रोजेक्ट सभी इंटरफ़ेस डेटा सहायक बैकएंड सिस्टम node-elm से आते हैं। यदि आप फ्रंटएंड और बैकएंड दोनों का विकास अनुभव करना चाहते हैं, तो बैकएंड सिस्टम डाउनलोड कर सकते हैं, ऐसी स्थिति में स्टार्टअप कमांड `npm run dev` के बजाय `npm run local` होगा। इसके अलावा, element-ui पर आधारित एक बैकएंड मैनेजमेंट पेज vue2-manage भी प्रदान किया गया है। केवल फ्रंटएंड विकास के लिए इसे अनदेखा किया जा सकता है। README में यह भी बताया गया है कि प्रिव्यू एड्रेस और इंटरफ़ेस के लिए https का उपयोग करना आवश्यक है। # कार्यान्वित सुविधाएँ - लोकेशन फंक्शन - शहर का चयन - पता खोजें - चयनित पते के पास मर्चेंट की सूची प्रदर्शित करना - भोजन और रेस्टोरेंट की खोज - दूरी, बिक्री, रेटिंग, विशेषता व्यंजन और डिलीवरी मोड के आधार पर सॉर्टिंग और फ़िल्टरिंग - रेस्टोरेंट फूड लिस्ट पेज - शॉपिंग कार्ट फंक्शन - स्टोर रिव्यू पेज - सिंगल फूड डिटेल पेज - मर्चेंट डिटेल पेज - लॉगिन और रजिस्ट्रेशन - पासवर्ड बदलना - पर्सनल सेंटर - एसएमएस और वॉयस वेरिफिकेशन भेजना - ऑर्डर फंक्शन - ऑर्डर लिस्ट - ऑर्डर विवरण - ऐप डाउनलोड - डिलीवरी एड्रेस जोड़ना, हटाना और संशोधित करना - खाता जानकारी - सर्विस सेंटर - रेड पैकेट (Red Packets) - प्रोफाइल पिक्चर अपलोड करना गैर-कार्यान्वित सुविधा: भुगतान (README में इसे "मैं यह नहीं कर पाया" के रूप में चिह्नित किया गया है)। # प्रोजेक्ट संरचना सोर्स कोड src डायरेक्टरी में स्थित है, जिसमें शामिल हैं: components (common, footer, header जैसे पॉप-अप, कार्ट, काउंटडाउन, लोडिंग एनिमेशन, रेटिंग स्टार, रेस्टोरेंट लिस्ट आदि), config (env.js एनवायरनमेंट स्विच, fetch.js डेटा फेचिंग, mUtils.js सामान्य तरीके, rem.js यूनिट रूपांतरण), images, page (बिजनेस के अनुसार विभाजित पेज जैसे balance, benefit, city, confirmOrder, download, find, food, forget, home, login, msite, order, points, profile, search, service, shop, vipcard), plugins, router, service (getData.js इंटरफ़ेस प्रबंधन, tempdata अस्थायी डेटा), store (vuex के action, getters, index, modules, mutation-types, mutations) और style (common.scss, mixin.scss, swiper.min.css)। रूट डायरेक्टरी में build (webpack कॉन्फ़िगरेशन), config (पैकेजिंग पाथ), elm (ऑनलाइन फाइलें), screenshots, App.vue, main.js, index.html आदि हैं। README के अनुसार इसमें 56 डायरेक्टरी और 203 फाइलें हैं। # लेखक का निष्कर्ष और भविष्य के लक्ष्य README में उल्लेख है कि पैसे (money) से संबंधित वेब लॉजिक काफी जटिल है। मर्चेंट और भोजन की श्रेणियों की अधिकता और जटिल पेज इंटरैक्शन के कारण, शॉपिंग कार्ट और ऑर्डरिंग के दौरान डेटा और लॉजिक चुनौतीपूर्ण थे, और बिना किसी डिज़ाइन या API दस्तावेज़ के, इसे धीरे-धीरे सीखना पड़ा। लेखक का मानना है कि जटिल इंटरैक्शन लॉजिक को संभालने के लिए vuex अनिवार्य है, और vue + vuex बड़े सिंगल पेज प्रोजेक्ट्स के लिए पूरी तरह सक्षम हैं। भविष्य के लक्ष्यों में शामिल हैं: node.js का उपयोग करके एक सिम्युलेटेड फूड डिलीवरी बैकएंड सिस्टम बनाना, Android और iOS के लिए एक नेटिव APP संस्करण लिखना, और समय मिलने पर विक्रेता (seller) संस्करण बनाना। # प्रदर्शन और लाइसेंस README ऑनलाइन डेमो एड्रेस (Chrome मोबाइल मोड में प्रिव्यू की सलाह दी जाती है) और मोबाइल QR कोड प्रदान करता है, साथ ही स्टोर लिस्ट, स्टोर फ़िल्टर, फूड लिस्ट, कार्ट, ऑर्डर कन्फर्मेशन, सर्च, लॉगिन और पर्सनल सेंटर के स्क्रीनशॉट संलग्न हैं। प्रोजेक्ट चर्चा Gitter ग्रुप या Issues/PR के माध्यम से की जा सकती है। लाइसेंस GPL है।