Hiểu về Vue.js CLI và cách sử dụng nó

Vue.js CLI (Giao diện dòng lệnh) là một công cụ mạnh mẽ giúp đơn giản hóa quá trình thiết lập, phát triển và quản lý các dự án Vue.js. Nó cung cấp một cách chuẩn hóa và hiệu quả để tạo các dự án mới, quản lý các phụ thuộc và cấu hình các thiết lập bản dựng. Bài viết này sẽ khám phá các tính năng của Vue CLI và trình bày cách sử dụng hiệu quả.

Cài đặt Vue CLI

Để bắt đầu sử dụng Vue CLI, bạn cần cài đặt nó trên toàn hệ thống của mình. Đảm bảo bạn đã cài đặt Node.js và npm (Node Package Manager), sau đó chạy lệnh sau trong terminal hoặc dấu nhắc lệnh của bạn:

npm install -g @vue/cli

Lệnh này cài đặt Vue CLI trên toàn cầu, giúp lệnh vue có thể sử dụng để tạo và quản lý các dự án Vue.js.

Tạo một dự án Vue.js mới

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

vue create my-vue-project

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 từ 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 và TypeScript. Đố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.

Hiểu về Vue CLI Preset

Vue CLI cung cấp một số tùy chọn để cấu hình dự án của bạn thông qua các cài đặt trước:

• Cài đặt trước mặc định: Bao gồm các công cụ thiết yếu như Babel và ESLint. Phù hợp với hầu hết các dự án và là điểm khởi đầu tốt cho người mới bắt đầu.
• Chọn tính năng thủ công: Cho phép bạn chọn các tính năng cụ thể như Vue Router để định tuyến, Vuex để quản lý trạng thái, TypeScript để kiểm tra kiểu, v.v.

Cấu trúc dự án

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

• src: Chứa mã nguồn cho ứng dụng của bạn, bao gồm các thành phần, chế độ xem và kiểu.
• public: Bao gồm các tài sản tĩnh và 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 nhập cho ứng dụng Vue của bạn. 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ể tùy chỉnh tệp này để xác định bố cục chính của ứng dụng.
• src/components: Chứa các thành phần 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 bạn.

Chạy máy chủ phát triển

Để xem ứng dụng Vue.js của bạn hoạt động như thế nào, hãy khởi động máy chủ phát triển bằng cách chạy lệnh sau:

npm run serve

Lệnh này sẽ khởi động máy chủ cục bộ tại http://localhost:8080 (hoặc một cổng khả dụng khác). Mở URL này trong trình duyệt của bạn để xem ứng dụng của bạn.

Xây dựng cho sản xuất

Khi bạn đã sẵn sàng triển khai ứng dụng của mình, bạn cần xây dựng ứng dụng cho sản xuất. Chạy lệnh sau để tạo bản dựng sẵn sàng cho sản xuất:

npm run build

Lệnh này tạo ra các tệp được tối ưu hóa và thu nhỏ trong thư mục dist mà bạn có thể triển khai lên máy chủ web của mình.

Sử dụng plugin Vue CLI

Vue CLI hỗ trợ các plugin bổ sung tính năng và khả năng cho dự án của bạn. Để cài đặt plugin, hãy chạy lệnh sau:

vue add 

Ví dụ, để thêm Vue Router vào dự án của bạn, bạn sẽ chạy:

vue add router

Để xóa một plugin, hãy sử dụng lệnh vue remove:

vue remove router

Plugin cũng có thể được cài đặt và quản lý thông qua tệp vue.config.js hoặc bằng cách sửa đổi cấu hình của dự án.

Tùy chỉnh cấu hình Vue CLI

Bạn có thể tùy chỉnh cấu hình của Vue CLI bằng cách tạo hoặc sửa đổi tệp vue.config.js trong thư mục gốc của dự án. Tệp này cho phép bạn điều chỉnh nhiều cài đặt khác nhau như cấu hình proxy, đường dẫn công khai, v.v.

module.exports = {
  devServer: {
    proxy: 'http://api.example.com'
  },
  publicPath: '/my-app/'
};

Phần kết luận

Vue.js CLI là một công cụ mạnh mẽ giúp đơn giản hóa quá trình tạo, quản lý và cấu hình các dự án Vue.js. Bằng cách sử dụng Vue CLI, bạn có thể nhanh chóng thiết lập một dự án mới, chạy máy chủ phát triển, xây dựng cho sản xuất và tùy chỉnh dự án của mình bằng các plugin và tùy chọn cấu hình. Với các khả năng này, bạn được trang bị đầy đủ để bắt đầu phát triển các ứng dụng web hiện đại, năng động với Vue.js.