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

Vue.js là một khuôn khổ JavaScript tiến bộ để xây dựng giao diện người dùng và các ứng dụng một trang. Nó rất linh hoạt và dễ tích hợp với các thư viện khác hoặc các dự án hiện có. Hướng dẫn này sẽ hướng dẫn bạn các bước để thiết lập dự án Vue.js đầu tiên của bạn bằng Vue CLI, một công cụ mạnh mẽ để tạo khung và quản lý các ứng dụng Vue.

Điều kiện tiên quyết

Trước khi thiết lập dự án Vue.js, hãy đảm bảo bạn đã cài đặt những phần sau trên hệ thống của mình:

• Node.js và npm: Vue.js yêu cầu phải cài đặt Node.js và npm (Node Package Manager). Bạn có thể tải xuống từ trang web chính thức của Node.js.

Bước 1: Cài đặt Vue CLI

Vue CLI (Command Line Interface) là một công cụ giúp bạn tạo và quản lý các dự án Vue.js một cách dễ dàng. Để cài đặt Vue CLI trên toàn hệ thống của bạn, hãy mở terminal hoặc command prompt và chạy lệnh sau:

npm install -g @vue/cli

Lệnh này cài đặt Vue CLI trên toàn cầu, cho phép bạn truy cập lệnh vue từ bất kỳ đâu trong thiết bị đầu cuối của bạn.

Bước 2: Tạo một dự án Vue mới

Sau khi Vue CLI được cài đặt, bạn có thể 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 cho dự án của mình. Bạn có thể chọn cài đặt trước mặc định, bao gồm Babel và ESLint, hoặc chọn thủ công các tính năng như Vue Router, Vuex, TypeScript, v.v. Đối với người mới bắt đầu, bạn nên chọn cài đặt trước mặc định bằng cách nhấn Enter.

Sau đó, 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 với tất cả các tệp và cấu hình cần thiết.

Bước 3: Điều hướng đến Thư mục Dự án

Sau khi dự án được tạo, hãy điều hướng đến thư mục dự án bằng lệnh sau:

cd my-vue-app

Thao tác này sẽ thay đổi thư mục làm việc của thiết bị đầu cuối của bạn thành thư mục dự án Vue.js mới được tạo.

Bước 4: Chạy máy chủ phát triển

Để xem ứng dụng Vue.js mới của bạn hoạt động như thế nào, hãy khởi động máy chủ phát triển cục bộ bằng cách 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 web của bạn và điều hướng đến URL này để xem ứng dụng Vue.js mới của bạn.

Hiểu cấu trúc dự án

Sau khi tạo một dự án Vue.js mới, bạn sẽ thấy một cấu trúc dự án được tổ chức tốt. Sau đây là các tệp và thư mục chính:

• src: Thư mục này chứa mã nguồn cho ứng dụng Vue.js của bạn. Tất cả các thành phần, chế độ xem và kiểu đều nằm ở đây.
• public: Thư mục này chứa các nội dung tĩnh như hình ảnh, phông chữ và tệp index.html, đóng vai trò là điểm vào cho ứng dụng của bạn.
• src/main.js: Điểm vào chính cho ứng dụng Vue.js của bạn. Tệp này khởi tạo phiên bản Vue và gắn nó vào DOM.
• src/App.vue: Thành phần gốc của ứng dụng của bạn. Bạn có thể sửa đổi tệp này để thay đổi 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 như HelloWorld.vue. Bạn có thể thêm các thành phần mới ở đây và nhập chúng vào ứng dụng của mình.

Bước 5: Tùy chỉnh ứng dụng của bạn

Bạn có thể bắt đầu tùy chỉnh ứng dụng Vue.js của mình bằng cách chỉnh sửa tệp App.vue và tạo các thành phần mới. Sau đây là ví dụ về một thành phần Vue đơn giản:

<template>
  <div>
    <h1>Welcome to My First Vue.js Project!</h1>
    <p>This is a simple Vue component.</p>
  </div>
</template>

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

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

Lưu các thay đổi và xem kết quả ngay lập tức trên trình duyệt của bạn nhờ tính năng tải lại nhanh của Vue.

Phần kết luận

Xin chúc mừng! Bạn đã thiết lập thành công dự án Vue.js đầu tiên của mình và đã học được những điều cơ bản về cách tạo và chạy ứng dụng Vue. Với Vue CLI, bạn có một công cụ mạnh mẽ giúp bạn xây dựng, phát triển và quản lý các dự án Vue.js của mình. Từ đây, bạn có thể khám phá các tính năng nâng cao hơn như Vue Router để định tuyến, Vuex để quản lý trạng thái và Composition API để phát triển mạnh mẽ và linh hoạt hơn.