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>

இந்த எடுத்துக்காட்டில், நாங்கள் ஒரு டேக் மற்றும் ஒரு பொத்தானைக் கொண்ட எளிய Vue பயன்பாட்டை உருவாக்கியுள்ளோம் h1. பொத்தானைக் கிளிக் செய்தால், செய்தி மாறும்.

கோப்பைச் சேமித்து index.html  உலாவியில் திறக்கவும். "Hello Vue.js!" என ஆரம்ப செய்தியைப் பார்ப்பீர்கள். நீங்கள் பொத்தானைக் கிளிக் செய்தால், செய்தி "செய்தி வெற்றிகரமாக மாற்றப்பட்டது!" என்று மாறும்.

நீங்கள் Vue.js உடன் தொடங்குவதற்கு இது ஒரு எளிய உதாரணம். உங்கள் பயன்பாடுகளை உருவாக்கும்போது Vue.js இன் பல அம்சங்களையும் சக்திவாய்ந்த திறன்களையும் நீங்கள் ஆராயலாம்.