close

Vue.js-ის ინსტალაცია და თქვენი პირველი პროექტის შექმნა

Vue.js-ის ინსტალაციისთვის შეგიძლიათ მიჰყვეთ ქვემოთ მოცემულ ნაბიჯებს:

ნაბიჯი 1: შექმენით ახალი დირექტორია თქვენი პროექტისთვის და გახსენით ტერმინალი ამ დირექტორიაში.

ნაბიჯი 2: გამოიყენეთ npm Vue CLI(Command Line Interface) დასაყენებლად შემდეგი ბრძანების გაშვებით:

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-ის მრავალი სხვა ფუნქცია და ძლიერი შესაძლებლობები თქვენი აპლიკაციების შემუშავებისას.