यहाँ एउटा विस्तृत चरण-दर-चरण गाइड छ विशेष कोड उदाहरणहरूको साथ एउटा TodoList अनुप्रयोग निर्माणको लागि Vue.js:
चरण 1: परियोजना सेटअप
Vue.js Vue CLI प्रयोग गरी नयाँ परियोजना सिर्जना गरेर सुरु गर्नुहोस् । तपाईको टर्मिनल खोल्नुहोस् र निम्न आदेश चलाउनुहोस्:
todo-list-app
यसले आधारभूत परियोजना संरचना र निर्भरताहरूसँग भनिने नयाँ निर्देशिका सिर्जना गर्नेछ ।
चरण 2: सिर्जना गर्दै TodoList Component
फोल्डर भित्र src
, नामक नयाँ फाइल सिर्जना गर्नुहोस् TodoList.vue
। यो अनुप्रयोगको लागि मुख्य घटक हुनेछ TodoList ।
मा TodoList.vue
:
चरण 3: सिर्जना गर्दै TodoItem Component
फोल्डर भित्र src
, नामक नयाँ फाइल सिर्जना गर्नुहोस् TodoItem.vue
। यो व्यक्तिगत टुडू वस्तुहरू प्रतिपादन गर्न जिम्मेवार बाल घटक हुनेछ।
मा TodoItem.vue
:
चरण 4: अद्यावधिक गर्दै TodoList Component
.vue भित्र TodoList, टेम्प्लेट खण्डलाई TodoItem v-for directive प्रयोग गरेर s रेन्डर गर्न अपडेट गर्नुहोस्।
मा TodoList.vue
:
चरण 5: TodoList आवेदन परीक्षण
अनुप्रयोग परीक्षण गर्न TodoList, "src/App.vue" फाइल खोल्नुहोस् र अवस्थित सामग्रीलाई निम्न कोडसँग बदल्नुहोस्:
चरण 6: अनुप्रयोग चलाउँदै
सबै परिवर्तनहरू बचत गर्नुहोस् र टर्मिनलमा निम्न आदेश चलाएर विकास सर्भर सुरु गर्नुहोस्:
कार्यमा रहेको अनुप्रयोग http://localhost:8080
हेर्नको लागि आफ्नो वेब ब्राउजरमा जानुहोस् । TodoList
यो उदाहरण a को आधारभूत कार्यक्षमता देखाउँछ
TodoList प्रयोग गरेर आवेदन Vue.js । प्रयोगकर्ताहरूले गर्न सक्ने वस्तुहरूको सूची हेर्न, पूरा भएको भनी चिन्ह लगाउन, तिनीहरूलाई मेटाउन र प्रदान गरिएको फारम प्रयोग गरेर नयाँ वस्तुहरू थप्न सक्छन्। todo वस्तुहरूको अवस्था कम्पोनेन्टमा व्यवस्थित गरिन्छ TodoList, जबकि प्रत्येक व्यक्तिगत todo वस्तु TodoItem कम्पोनेन्ट प्रयोग गरेर रेन्डर गरिन्छ।
कृपया ध्यान दिनुहोस् कि यो एक सरल कार्यान्वयन हो, र तपाइँ तपाइँको विशेष आवश्यकताहरु को आधार मा थप अनुकूलित र विस्तार गर्न सक्नुहुन्छ।