GALAXY TECH
Chuyên gia Công nghệ
Thứ bảy, 04/01/2020 | 00:00 GMT+7

Giải mã Vue CLI

Ý tưởng đằng sau CLI (Giao diện dòng lệnh) là sử dụng các lệnh đơn giản, có thể chỉnh sửa để tạo ra kết quả kết quả lớn hơn. Vue CLI cũng không khác. Khi một dự án mới bắt đầu, điều cuối cùng mà một nhà phát triển nên lo lắng là giàn giáo dự án. May mắn là group Vue đã đóng gói giàn giáo, tạo mẫu và nhiều lệnh tiện dụng khác vào một công cụ CLI dễ dàng!

Đang cài đặt

Cho dù npm hay sợi là trình quản lý gói bạn muốn , quá trình cài đặt Vue CLI rất đơn giản có thể.

#npm option
$ npm install -g @vue/cli

#yarn option
$ yarn global add  @vue/cli

Xác nhận điều này đã được cài đặt chính xác bằng cách mở một terminal mới và sử dụng lệnh vue .

CLI được cài đặt trên phạm vi global để được sử dụng cho nhiều dự án.

Tạo mẫu

Tạo mẫu tức thì là một trong những tính năng cốt lõi của Vue CLI, cho phép các nhà phát triển nhanh chóng viết tệp .vue hoặc .js và xem trước công việc của họ mà không cần cấu hình các công cụ xây dựng khác như webpack và babel .

Để sử dụng tính năng này, trước tiên bạn phải cài đặt một tiện ích bổ sung.

# npm option
$ npm install -g @vue/cli-service-global

# yarn option
$ yarn global add @vue/cli-service-global

Sau khi hoàn tất, bạn có thể ghi ra file thành phần của bạn , chuyển đến folder của nó và chạy vue serve {YOUR_FILE_NAME} để xem trước ngay lập tức.

Các cờ bổ sung bạn có thể chuyển sang giao bóng vue serve bao gồm:

  • -o –open mở trình duyệt mặc định của bạn đến cổng của server phát triển
  • -c –copy sao chép URL của server nhà phát triển vào clipboard của bạn
  • -p –port nhận một cổng đối số duy nhất để chỉ định cổng server nhà phát triển, mặc định là 8080

Đoạn đầu đài

Một trong những lợi ích chính của Vue CLI là nó xử lý cài đặt dự án và dàn dựng cho bạn, loại bỏ sự cần thiết phải lo lắng về cấu trúc folder .

Chạy phần bên dưới sẽ bắt đầu quá trình cài đặt cho một dự án mới:

$ vue create my-new-project

Sau đó, bạn sẽ được hiển thị một loạt dấu nhắc , cho phép bạn chọn các tính năng ưa thích của bạn cho dự án này. Các tính năng này bao gồm:

  • Babel
  • TypeScript
  • Hỗ trợ PWA
  • Bộ định tuyến Vue
  • Vuex
  • Bộ xử lý trước CSS
  • Linter / Formatter
  • Kiểm tra đơn vị
  • Thử nghiệm từ đầu đến cuối

Tiếp theo là một số câu hỏi khác về tùy chọn (tùy thuộc vào những gì bạn đã chọn trước đó):

  • Cú pháp thành phần kiểu lớp
  • Sử dụng Babel với TypeScript
  • Chế độ lịch sử bộ định tuyến
  • SASS, LESS hoặc Stylus
  • Cấu hình ESLint
  • Giải pháp kiểm tra Unit & E2E
  • Tệp cấu hình chuyên dụng hoặc trong package.json
  • Trình quản lý gói ưu tiên

Sau tất cả những điều này, bạn cũng có thể chọn lưu các cài đặt này dưới dạng cài đặt trước, cho phép bạn bỏ qua những câu hỏi này trong các dự án trong tương lai.

Thích UI hơn CLI? Chạy vue ui để chạy quy trình GUI.

bổ sung

Mặc dù hầu hết các plugin sẽ được tự động xử lý bởi quá trình dàn dựng, nhưng bạn có thể tìm thấy giữa chừng một dự án mà bạn muốn thêm một dự án khác. Sử dụng vue add , bạn có thể dễ dàng đưa một plugin mới vào một dự án hiện có.

Không thể tìm thấy những gì bạn cần? Hãy thử duyệt qua danh sách các plugin có sẵn này!

Tham chiếu cấu hình

Ngoài các cài đặt được đề cập ở trên, CLI cũng cung cấp một file cấu hình tùy chọn, vue.config.js . Tệp này được dùng để điều chỉnh các tùy chọn trong CLI cũng như cài đặt webpack nội bộ.

Tệp này phải ở cấp cao nhất của dự án của bạn, bên cạnh package.json

Một số tùy chọn cấu hình quan trọng hơn:

  • publicPath : URL mà ứng dụng của bạn cuối cùng sẽ được triển khai. Giá trị mặc định là '/' , vì vậy nếu domain của bạn là my-domain.com , thì giá trị này sẽ triển khai tới my-domain.com/ . Điều này hữu ích nếu ứng dụng của bạn không phải là domain cấp cao nhất mà nằm trên một đường dẫn phụ.
  • outputDir : Thư mục chứa các file xây dựng sẽ được tạo. Theo mặc định, đây là dist
  • propertyDir : Nơi đặt tài sản tĩnh của bạn. Điều này liên quan đến folder outputDir
  • trang : Ứng dụng Vue không nhất thiết phải là * SPA * (ứng dụng một trang). Chế độ này sẽ tạo ra các trang cho mỗi điểm nhập được chỉ định. Đây phải là một đối tượng chứa mỗi trang, mỗi trang có một entry duy nhất. Bạn cũng có thể cung cấp các tùy chọn template, filename, title, chunk , nhưng chúng không bắt buộc.

Dưới đây là một ví dụ đơn giản về file vue.config.js có thể trông như thế nào:

module.exports = {
  outputDir: 'public',
  // ...more options
}

Bạn có thể tìm thấy tài liệu tham khảo cho tất cả các tùy chọn có sẵn tại đây .

Có rất nhiều tùy chọn bổ sung có thể được chuyển cho tùy chọn cấu hình này. Vui lòng xem Tài liệu chính thức để biết thêm thông tin!

Tags:

Các tin liên quan