VueJS: Vue CLI 3: Tổng quan

Tài liệu hướng dẫn này là dành cho phiên bản @vue/cli 3.x. Đối với vue-cli thấp hơn xin xem ở đây.

Vue CLI là một hệ thống đầy đủ để phát triển Vue.js nhanh chóng, nó cung cấp:

• Dự án tương tác scaffolding qua @vue/cli.
• Cấu hình tạo prototyping nhanh chóng qua @vue/cli+ @vue/cli-service-global.
• Một dependence thời gian chạy ( @vue/cli-service) là:
  • Có thể nâng cấp;
  • Được xây dựng trên nền tảng webpack, với các default hợp lý;
  • Cấu hình thông qua tập tin cấu hình trong dự án;
  • Có thể mở rộng qua plugin
• Một tập hợp các plugin chính thức phong phú kết hợp các công cụ tốt nhất trong hệ sinh thái giao diện người dùng.
• Một giao diện người dùng đồ họa đầy đủ để tạo và quản lý các dự án Vue.js.

Vue CLI đặt mục tiêu là công cụ chuẩn cho hệ sinh thái Vue. Nó đảm bảo các công cụ xây dựng khác nhau hoạt động trơn tru cùng với các giá trị mặc định hợp lý để bạn có thể tập trung vào viết ứng dụng của mình thay vì mất thời gian với các cấu hình. Đồng thời, nó vẫn cung cấp sự linh hoạt để tinh chỉnh cấu hình của từng công cụ mà không cần phải loại bỏ.

Thành phần của hệ thống

Có một số thành phần hoạt động của Vue CLI - nếu bạn nhìn vào mã nguồn, bạn sẽ thấy rằng nó là một monorepo chứa một số gói được xuất bản riêng biệt.

#CLI

CLI ( @vue/cli) là gói npm được cài đặt trên toàn cầu và cung cấp lệnh vue trong terminal của bạn. Nó cung cấp khả năng xây dựng một dự án mới một cách nhanh chóng thông qua vue create, hoặc ngay lập tức thử nghiệm các ý tưởng mới thông qua vue serve. Bạn cũng có thể quản lý dự án của mình bằng giao diện người dùng đồ họa qua vue ui. Chúng ta sẽ xem nó có thể làm những gì trong các phần tiếp theo của hướng dẫn.

Dịch vụ CLI

Dịch vụ CLI ( @vue/cli-service) là một dependency phát triển. Đây là gói npm được cài đặt cục bộ vào mọi dự án được tạo bởi @vue/cli.

Dịch vụ CLI được xây dựng trên webpack và webpack-dev-server . Nó chứa:

• Dịch vụ cốt lõi để tải các Plugin CLI khác;
• Cấu hình webpack nội bộ được tối ưu hóa cho hầu hết các ứng dụng;
• Các vue-cli-service nhị phân bên trong dự án đi kèm với serve cơ bản, build và các lệnh inspect.

Nếu bạn đã quen thuộc với create-react-app, thì @vue/cli-service gần tương đương với react-scripts, mặc dù bộ tính năng là khác nhau.

Phần trên Dịch vụ CLI bao gồm việc sử dụng chi tiết của nó.

#CLI Plugins

CLI Plugins là các gói npm cung cấp các tính năng tùy chọn cho các dự án Vue CLI của bạn, chẳng hạn như trao đổi Babel / TypeScript, tích hợp ESLint, kiểm thử đơn vị và kiểm tra đầu cuối. Rất dễ dàng để phát hiện một plugin Vue CLI khi tên của họ bắt đầu bằng @vue/cli-plugin- (cho các plugin tích hợp) hoặc vue-cli-plugin- (dành cho các plugin cộng đồng).

Khi bạn chạy vue-cli-service nhị phân bên trong dự án của bạn, nó sẽ tự động giải quyết và tải tất cả các Plugins CLI được liệt kê trong dự án package.json của bạn.

Các plugin có thể được đưa vào như một phần của quá trình tạo dự án của bạn hoặc được thêm vào dự án sau này. Chúng cũng có thể được nhóm lại thành các giá trị đặt sẵn có thể tái sử dụng. Chúng ta sẽ thảo luận chúng sâu hơn trong phần Plugin và Preset.