close

Cài đặt Vue.js và tạo dự án đầu tiên

Để cài đặt Vue.js, bạn có thể làm theo các bước sau

Bước 1: Tạo một thư mục mới cho dự án của bạn và mở terminal trong thư mục đó.

Bước 2: Sử dụng npm để cài đặt Vue CLI (Command Line Interface) bằng cách chạy lệnh sau:

npm install -g @vue/cli


Bước 3: Sau khi cài đặt thành công, bạn có thể tạo một dự án Vue mới bằng lệnh sau:

vue create my-vue-project


Bước 4: Chọn các tùy chọn cấu hình cho dự án của bạn, bao gồm cài đặt Babel, ESLint và CSS Pre-processors (tuỳ chọn).

Bước 5: Sau khi hoàn tất quá trình tạo dự án, di chuyển vào thư mục dự án bằng lệnh:

cd my-vue-project


Bước 6: Chạy lệnh sau để khởi động dự án Vue:

npm run serve


Sau khi quá trình khởi động hoàn tất, bạn sẽ thấy URL để truy cập vào ứng dụng Vue của bạn trên trình duyệt.

Ví dụ đơn giản về Vue.js

Hãy tạo một file HTML mới và đặt tên là index.html. Trong file này, thêm mã sau:

html
<!DOCTYPE html>
<html>
<head>
  <title>Ví dụ Vue.js</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Thay đổi thông điệp</button>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Xin chào Vue.js!'
      },
      methods: {
        changeMessage() {
          this.message = 'Thay đổi thông điệp thành công!';
        }
      }
    });
  </script>
</body>
</html>

Trong ví dụ này, chúng ta đã tạo một ứng dụng Vue đơn giản với một thẻ h1 và một nút nhấn. Khi nhấn vào nút, thông điệp sẽ thay đổi.

Lưu file index.html và mở nó trên trình duyệt. Bạn sẽ thấy thông điệp ban đầu là "Xin chào Vue.js!". Khi nhấn vào nút, thông điệp sẽ thay đổi thành "Thay đổi thông điệp thành công!".

Đây chỉ là một ví dụ đơn giản để bạn làm quen với Vue.js. Bạn có thể khám phá thêm nhiều tính năng và khả năng mạnh mẽ của Vue.js trong quá trình phát triển ứng dụng của mình.