close

Vue.js स्थापना गर्दै र तपाईंको पहिलो परियोजना सिर्जना गर्दै

Vue.js स्थापना गर्न, तपाईं तलका चरणहरू पालना गर्न सक्नुहुन्छ:

चरण 1: तपाईंको परियोजनाको लागि नयाँ डाइरेक्टरी सिर्जना गर्नुहोस् र त्यो डाइरेक्टरीमा टर्मिनल खोल्नुहोस्।

चरण 2: निम्न आदेश चलाएर Vue CLI(कमांड लाइन इन्टरफेस) स्थापना गर्न npm प्रयोग गर्नुहोस्:

npm install -g @vue/cli


चरण 3: सफल स्थापना पछि, तपाइँ निम्न आदेश प्रयोग गरेर नयाँ Vue परियोजना सिर्जना गर्न सक्नुहुन्छ:

vue create my-vue-project


चरण 4: आफ्नो परियोजनाको लागि कन्फिगरेसन विकल्पहरू छनौट गर्नुहोस्, Babel, ESLint, र CSS पूर्व-प्रोसेसरहरू(वैकल्पिक) स्थापना सहित।

चरण 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  र ब्राउजरमा खोल्नुहोस्। तपाईंले "Hello Vue.js!" को रूपमा प्रारम्भिक सन्देश देख्नुहुनेछ। जब तपाइँ बटन क्लिक गर्नुहुन्छ, सन्देश "सफलतापूर्वक सन्देश परिवर्तन भयो!" मा परिवर्तन हुनेछ।

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