Bắt đầu với Vue.js dành cho người mới bắt đầu

Vue.js là một khuôn khổ JavaScript phổ biến để xây dựng giao diện người dùng và các ứng dụng một trang. Nó được biết đến với sự đơn giản, linh hoạt và dễ tích hợp với các thư viện hoặc dự án khác. Vue.js là một lựa chọn tuyệt vời cho cả người mới bắt đầu và các nhà phát triển có kinh nghiệm muốn xây dựng các ứng dụng web động với nỗ lực tối thiểu.

Thiết lập dự án Vue.js đầu tiên của bạn

Để bắt đầu với Vue.js, bạn cần thiết lập môi trường phát triển. Cách dễ nhất để thực hiện là sử dụng Vue CLI (Giao diện dòng lệnh), giúp bạn tạo và quản lý các dự án Vue.js. Thực hiện theo các bước sau để thiết lập dự án Vue.js đầu tiên của bạn:

Cài đặt Node.js và npm: Vue.js yêu cầu Node.js và npm (Node Package Manager) phải được cài đặt trên hệ thống của bạn. Bạn có thể tải xuống và cài đặt chúng từ trang web chính thức của Node.js.
Cài đặt Vue CLI: Sau khi Node.js và npm được cài đặt, hãy mở terminal hoặc dấu nhắc lệnh và chạy lệnh sau để cài đặt Vue CLI trên toàn cầu:

npm install -g @vue/cli

Tạo một dự án Vue mới: Sau khi cài đặt Vue CLI, hãy tạo một dự án Vue.js mới bằng cách chạy lệnh sau:

vue create my-vue-app

Bạn sẽ được nhắc chọn một cài đặt trước. Đối với người mới bắt đầu, hãy chọn cài đặt trước mặc định bằng cách nhấn Enter. Vue CLI sẽ tạo một thư mục mới có tên my-vue-app và thiết lập cấu trúc dự án cho bạn.

Điều hướng đến Thư mục Dự án: Đi đến thư mục dự án bằng cách chạy:

cd my-vue-app

Chạy Máy chủ phát triển: Để khởi động máy chủ phát triển cục bộ và xem ứng dụng Vue.js mới của bạn, hãy chạy:

npm run serve

Lệnh này sẽ khởi động máy chủ phát triển tại http://localhost:8080 (hoặc một cổng khả dụng khác). Mở trình duyệt của bạn và điều hướng đến URL này để xem ứng dụng Vue.js của bạn đang hoạt động!

Hiểu về cấu trúc dự án Vue.js

Một dự án Vue.js mới tạo có cấu trúc được tổ chức tốt. Sau đây là tổng quan nhanh về các tệp và thư mục quan trọng nhất:

src: Thư mục này chứa mã nguồn cho ứng dụng của bạn. Tất cả các thành phần Vue, kiểu dáng và các tài nguyên khác của bạn đều nằm ở đây.
public: Thư mục này chứa các tài sản tĩnh như hình ảnh, phông chữ và tệp index.html. Tệp index.html đóng vai trò là điểm vào cho ứng dụng của bạn.
src/main.js: Tệp này là điểm vào của ứng dụng Vue.js của bạn. Nó khởi tạo phiên bản Vue và gắn nó vào DOM.
src/App.vue: Đây là thành phần gốc của ứng dụng của bạn. Bạn có thể tùy chỉnh tệp này để tạo bố cục chính của ứng dụng.
src/components: Thư mục này chứa các thành phần Vue mẫu, chẳng hạn như HelloWorld.vue. Bạn có thể tạo các thành phần mới trong thư mục này và nhập chúng vào ứng dụng của mình.

Tạo thành phần Vue.js đầu tiên của bạn

Vue.js là một khuôn khổ dựa trên thành phần, có nghĩa là ứng dụng của bạn được xây dựng bằng các thành phần có thể tái sử dụng và độc lập. Hãy tạo một thành phần Vue.js đơn giản để hiển thị thông báo chào mừng.

Tạo thành phần mới: Trong thư mục src/components, tạo một tệp mới có tên Greeting.vue và thêm đoạn mã sau:

<template>
  <div>
    <h1>Hello, Vue.js!</h1>
  </div>
</template>

<script>
export default {
  name: 'Greeting'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Thành phần này được chia thành ba phần: '<template>' dành cho đánh dấu HTML, '<script>' dành cho logic JavaScript và '<style>' dành cho các kiểu CSS có phạm vi.

Nhập và sử dụng thành phần: Mở src/App.vue và sửa đổi để nhập và sử dụng thành phần Greeting mới:

<template>
  <div id="app">
    <Greeting />
  </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  name: 'App',
  components: {
    Greeting
  }
};
</script>

<style>
#app {
  text-align: center;
}
</style>

Lưu các thay đổi và máy chủ phát triển của bạn sẽ tự động tải lại. Bây giờ bạn sẽ thấy thông báo chào mừng "Xin chào, Vue.js!" hiển thị trên trang.

Phần kết luận

Bạn đã thiết lập thành công môi trường phát triển Vue.js, tạo một dự án mới và xây dựng thành phần đầu tiên của mình. Vue.js là một khuôn khổ mạnh mẽ và linh hoạt cho phép bạn tạo các ứng dụng web động và tương tác nhanh chóng. Khi bạn tiếp tục học, bạn sẽ khám phá ra nhiều tính năng nâng cao hơn như Vue Router, Vuex và Composition API, cho phép bạn xây dựng các ứng dụng mạnh mẽ hơn nữa.

Hãy bắt đầu xây dựng với Vue.js ngay hôm nay và khai thác toàn bộ tiềm năng của phát triển web hiện đại!

vuejs thiết lập thành phần cli cài đặt dự án mẫu tập lệnh kiểu nhập mô-đun xây dựng triển khai phạm vi