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 యొక్క మరిన్ని ఫీచర్లు మరియు శక్తివంతమైన సామర్థ్యాలను అన్వేషించవచ్చు.