close

Vue.js स्थापित करणे आणि आपला पहिला प्रकल्प तयार करणे

Vue.js स्थापित करण्यासाठी, तुम्ही खालील चरणांचे अनुसरण करू शकता:

पायरी 1: तुमच्या प्रकल्पासाठी एक नवीन निर्देशिका तयार करा आणि त्या निर्देशिकेत टर्मिनल उघडा.

चरण 2: खालील आदेश चालवून Vue CLI(कमांड लाइन इंटरफेस) स्थापित करण्यासाठी npm वापरा:

npm install -g @vue/cli


पायरी 3: यशस्वी इंस्टॉलेशननंतर, तुम्ही खालील कमांड वापरून नवीन Vue प्रोजेक्ट तयार करू शकता:

vue create my-vue-project


पायरी 4: बॅबल, 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 ची आणखी बरीच वैशिष्ट्ये आणि शक्तिशाली क्षमता एक्सप्लोर करू शकता.