शुरुआती लोगों के लिए Vue.js के साथ शुरुआत करना

Vue.js यूजर इंटरफेस और सिंगल-पेज एप्लिकेशन बनाने के लिए एक लोकप्रिय जावास्क्रिप्ट फ्रेमवर्क है। यह अपनी सादगी, लचीलेपन और अन्य लाइब्रेरी या प्रोजेक्ट के साथ एकीकरण में आसानी के लिए जाना जाता है। Vue.js शुरुआती और अनुभवी डेवलपर्स दोनों के लिए एक बेहतरीन विकल्प है जो कम से कम प्रयास के साथ गतिशील वेब एप्लिकेशन बनाना चाहते हैं।

अपना पहला Vue.js प्रोजेक्ट सेट अप करना

Vue.js के साथ आरंभ करने के लिए, आपको एक विकास वातावरण सेट अप करना होगा। ऐसा करने का सबसे आसान तरीका Vue CLI (कमांड लाइन इंटरफ़ेस) का उपयोग करना है, जो आपको Vue.js प्रोजेक्ट बनाने और प्रबंधित करने में मदद करता है। अपना पहला Vue.js प्रोजेक्ट सेट अप करने के लिए इन चरणों का पालन करें:

Node.js और npm इंस्टॉल करें: Vue.js के लिए आपके सिस्टम पर Node.js और npm (Node Package Manager) इंस्टॉल होना ज़रूरी है। आप इन्हें आधिकारिक Node.js वेबसाइट से डाउनलोड करके इंस्टॉल कर सकते हैं।
Vue CLI स्थापित करें: एक बार Node.js और npm स्थापित हो जाने पर, अपना टर्मिनल या कमांड प्रॉम्प्ट खोलें और Vue CLI को वैश्विक रूप से स्थापित करने के लिए निम्नलिखित कमांड चलाएँ:

npm install -g @vue/cli

एक नया Vue प्रोजेक्ट बनाएँ: Vue CLI स्थापित करने के बाद, निम्नलिखित कमांड चलाकर एक नया Vue.js प्रोजेक्ट बनाएँ:

vue create my-vue-app

आपको एक प्रीसेट चुनने के लिए कहा जाएगा। शुरुआती लोगों के लिए, Enter दबाकर डिफ़ॉल्ट प्रीसेट चुनें। Vue CLI my-vue-app नाम से एक नया फ़ोल्डर बनाएगा और आपके लिए प्रोजेक्ट संरचना सेट करेगा।

प्रोजेक्ट फ़ोल्डर पर जाएँ: निम्न चलाकर प्रोजेक्ट फ़ोल्डर पर जाएँ:

cd my-vue-app

विकास सर्वर चलाएँ: स्थानीय विकास सर्वर शुरू करने और अपना नया Vue.js अनुप्रयोग देखने के लिए, चलाएँ:

npm run serve

यह कमांड http://localhost:8080 (या किसी अन्य उपलब्ध पोर्ट) पर एक डेवलपमेंट सर्वर शुरू करेगा। अपना ब्राउज़र खोलें और अपने Vue.js एप्लिकेशन को क्रियाशील देखने के लिए इस URL पर जाएँ!

Vue.js प्रोजेक्ट संरचना को समझना

एक नया बनाया गया Vue.js प्रोजेक्ट एक सुव्यवस्थित संरचना के साथ आता है। यहाँ सबसे महत्वपूर्ण फ़ाइलों और फ़ोल्डरों का एक त्वरित अवलोकन दिया गया है:

src: इस फ़ोल्डर में आपके एप्लिकेशन का सोर्स कोड होता है। आपके सभी Vue घटक, शैलियाँ और अन्य संसाधन यहाँ जाते हैं।
public: इस फ़ोल्डर में स्थिर संपत्तियाँ जैसे छवियाँ, फ़ॉन्ट और index.html फ़ाइल होती है। index.html फ़ाइल आपके एप्लिकेशन के लिए प्रवेश बिंदु के रूप में कार्य करती है।
src/main.js: यह फ़ाइल आपके Vue.js एप्लीकेशन का एंट्री पॉइंट है। यह Vue इंस्टेंस को इनिशियलाइज़ करता है और इसे DOM पर माउंट करता है।
src/App.vue: यह आपके एप्लिकेशन का रूट घटक है। आप अपने ऐप का मुख्य लेआउट बनाने के लिए इस फ़ाइल को कस्टमाइज़ कर सकते हैं।
src/components: इस फ़ोल्डर में Vue कॉम्पोनेंट्स के उदाहरण हैं, जैसे HelloWorld.vue. आप इस फ़ोल्डर में नए कॉम्पोनेंट्स बना सकते हैं और उन्हें अपने एप्लिकेशन में आयात कर सकते हैं.

अपना पहला Vue.js घटक बनाना

Vue.js एक घटक-आधारित फ़्रेमवर्क है, जिसका अर्थ है कि आपका एप्लिकेशन पुन: प्रयोज्य और स्व-निहित घटकों का उपयोग करके बनाया गया है। आइए अभिवादन संदेश प्रदर्शित करने के लिए एक सरल Vue.js घटक बनाएँ।

एक नया घटक बनाएँ: src/components फ़ोल्डर में, Greeting.vue नाम से एक नई फ़ाइल बनाएँ और निम्नलिखित कोड जोड़ें:

<template>
  <div>
    <h1>Hello, Vue.js!</h1>
  </div>
</template>

<script>
export default {
  name: 'Greeting'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

घटक को तीन खंडों में विभाजित किया गया है: HTML मार्कअप के लिए '<template>', जावास्क्रिप्ट तर्क के लिए '<script>', और स्कोप्ड CSS शैलियों के लिए '<style>'।

घटक को आयात करें और उपयोग करें: src/App.vue खोलें और नए Greeting घटक को आयात करने और उपयोग करने के लिए इसे संशोधित करें:

<template>
  <div id="app">
    <Greeting />
  </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  name: 'App',
  components: {
    Greeting
  }
};
</script>

<style>
#app {
  text-align: center;
}
</style>

परिवर्तनों को सहेजें और आपका डेवलपमेंट सर्वर स्वचालित रूप से पुनः लोड हो जाएगा। अब आपको पृष्ठ पर "हैलो, Vue.js!" अभिवादन संदेश दिखाई देना चाहिए।

निष्कर्ष

आपने सफलतापूर्वक एक Vue.js विकास वातावरण स्थापित किया है, एक नया प्रोजेक्ट बनाया है, और अपना पहला घटक बनाया है। Vue.js एक शक्तिशाली और लचीला ढांचा है जो आपको गतिशील और इंटरैक्टिव वेब एप्लिकेशन को तेज़ी से बनाने की अनुमति देता है। जैसे-जैसे आप सीखते रहेंगे, आपको Vue Router, Vuex और Composition API जैसी और भी उन्नत सुविधाएँ मिलेंगी, जो आपको और भी मज़बूत एप्लिकेशन बनाने में सक्षम बनाएगी।

आज ही Vue.js के साथ निर्माण शुरू करें और आधुनिक वेब विकास की पूरी क्षमता को अनलॉक करें!

vuejs सेटअप घटक cli इंस्टॉल प्रोजेक्ट टेम्प्लेट स्क्रिप्ट स्टाइल आयात मॉड्यूल निर्माण परिनियोजन स्कोप्ड