close

Vue.js इंस्टॉल करना और अपना पहला प्रोजेक्ट बनाना

Vue.js स्थापित करने के लिए, आप नीचे दिए गए चरणों का पालन कर सकते हैं:

चरण 1: अपने प्रोजेक्ट के लिए एक नई निर्देशिका बनाएं और उस निर्देशिका में टर्मिनल खोलें।

चरण 2: निम्नलिखित कमांड चलाकर Vue CLI(कमांड लाइन इंटरफ़ेस) स्थापित करने के लिए npm का उपयोग करें:

npm install -g @vue/cli


चरण 3: सफल इंस्टॉलेशन के बाद, आप निम्नलिखित कमांड का उपयोग करके एक नया Vue प्रोजेक्ट बना सकते हैं:

vue create my-vue-project


चरण 4: अपने प्रोजेक्ट के लिए कॉन्फ़िगरेशन विकल्प चुनें, जिसमें बैबेल, ईएसलिंट और सीएसएस प्री-प्रोसेसर(वैकल्पिक) स्थापित करना शामिल है।

चरण 5: एक बार प्रोजेक्ट निर्माण प्रक्रिया पूरी हो जाने पर, कमांड का उपयोग करके प्रोजेक्ट निर्देशिका में नेविगेट करें:

cd my-vue-project


चरण 6: Vue प्रोजेक्ट शुरू करने के लिए निम्नलिखित कमांड चलाएँ:

npm run serve


स्टार्टअप प्रक्रिया पूरी होने के बाद, आपको ब्राउज़र पर अपने Vue एप्लिकेशन तक पहुंचने के लिए एक URL दिखाई देगा।

Vue.js का एक सरल उदाहरण:

आइए एक नई HTML फ़ाइल बनाएं और इसे index.html `नाम दें। इस फ़ाइल में, निम्न कोड जोड़ें:

html  
<!DOCTYPE html>  
<html>  
<head>  
  <title>Vue.js Example</title>  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
</head>  
<body>  
  <div id="app">  
    <h1>{{ message }}</h1>  
    <button @click="changeMessage">Change Message</button>  
  </div>  
  
  <script>  
    new Vue({  
      el: '#app',  
      data: {  
        message: 'Hello Vue.js!'  
      },  
      methods: {  
        changeMessage() {  
          this.message = 'Message changed successfully!';  
        }  
      }  
    });  
  </script>  
</body>  
</html>

इस उदाहरण में, हमने एक h1 टैग और एक बटन के साथ एक सरल Vue एप्लिकेशन बनाया है। बटन पर क्लिक करते ही संदेश बदल जाएगा.

फ़ाइल को सहेजें index.html  और ब्राउज़र में खोलें। आपको प्रारंभिक संदेश "हैलो Vue.js!" के रूप में दिखाई देगा। जब आप बटन पर क्लिक करेंगे, तो संदेश "संदेश सफलतापूर्वक बदल गया!" में बदल जाएगा।

Vue.js के साथ शुरुआत करने के लिए यह सिर्फ एक सरल उदाहरण है। आप अपने एप्लिकेशन विकसित करते समय Vue.js की कई और सुविधाओं और शक्तिशाली क्षमताओं का पता लगा सकते हैं।