VueJS: Plugin và Preset

Plugin

Vue CLI sử dụng kiến ​​trúc dựa trên plugin. Nếu bạn kiểm tra  package.json của dự án mới được tạo ra, bạn sẽ tìm thấy các dependence bắt đầu bằng @vue/cli-plugin-. Các plugin có thể sửa đổi cấu hình webpack nội bộ và các lệnh đưa vào vue-cli-service. Hầu hết các tính năng được liệt kê trong quá trình tạo dự án được thực hiện dưới dạng plugin. Kiến trúc dựa trên plugin làm cho Vue CLI linh hoạt và có thể mở rộng.

#Cài đặt lugin trong dự án hiện thời

Mỗi plugin CLI gắn với một trình tạo (tạo tệp) và một plugin thời gian chạy (điều chỉnh cấu hình webpack lõi và các lệnh đưa vào). Khi bạn sử dụng vue create để tạo dự án mới, một số plugin sẽ được cài đặt sẵn cho bạn dựa trên lựa chọn tính năng của bạn. Trong trường hợp bạn muốn cài đặt một plugin vào một dự án đã tạo, bạn có thể làm như sau với lệnh vue add:

vue add @vue/eslint

Lệnh này giải quyết @vue/eslint thành tên gói đầy đủ @vue/cli-plugin-eslint, hãy cài đặt nó từ npm và gọi trình tạo của nó.

# có những điểm tương đồng so với việc sử dụng trước đó
vue add @vue/cli-plugin-eslint

Không có tiền tố @vue, lệnh sau sẽ giải quyết thành một gói không được quản lý thay thế. Ví dụ: để cài đặt plugin của bên thứ 3 vue-cli-plugin-apollo:

# lệnh và lời gọi vue-cli-plugin-apollo
vue add apollo

Bạn cũng có thể sử dụng plugin của bên thứ ba trong một phạm vi cụ thể. Ví dụ: nếu plugin được đặt tên @foo/vue-cli-plugin-bar, bạn có thể thêm plugin đó bằng:

vue add @foo/bar

Bạn có thể truyền các tùy chọn bộ tạo tới plugin đã cài đặt (điều này sẽ bỏ qua các lời nhắc):

vue add @vue/eslint --config airbnb --lintOn save

vue-router và vuex là các trường hợp đặc biệt - chúng không có plugin của riêng chúng, nhưng bạn vẫn có thể thêm chúng:

vue add router
vue add vuex

Nếu một plugin đã được cài đặt, bạn có thể bỏ qua cài đặt và chỉ gọi trình tạo của nó bằng vue invokelệnh. Lệnh này lấy các đối số giống như vue add.

#Dự án plugin cục bộ

Nếu bạn cần truy cập vào pluginAPI trong dự án của mình và không muốn tạo plugin đầy đủ cho nó, bạn có thể sử dụng tùy chọn vuePlugins.service  trong tệp package.json:

{
  "vuePlugins": {
    "service": ["my-commands.js"]
  }
}

Mỗi tệp sẽ cần xuất một hàm lấy plugin API làm đối số đầu tiên. Để biết thêm thông tin về API plugin, hãy xem Hướng dẫn phát triển plugin.

Bạn cũng có thể thêm các tệp sẽ hoạt động như các plugin UI với tùy chọn vuePlugins.ui:

{
  "vuePlugins": {
    "ui": ["my-ui.js"]
  }
}

Để biết thêm thông tin, hãy đọc API Plugin UI.

Preset

Một giá trị đặt trước của Vue CLI là một đối tượng JSON chứa các tùy chọn và các trình cắm thêm đã được xác định trước để tạo một dự án mới để người dùng không phải đi qua các lời nhắc để chọn chúng.

Các giá trị đặt sẵn được lưu trong khi vue create được lưu trữ trong một tệp cấu hình trong thư mục home của người dùng của bạn ( ~/.vuerc). Bạn có thể chỉnh sửa trực tiếp tệp này để tinh chỉnh / thêm / xóa các giá trị đặt sẵn đã lưu.

Đây là một cài đặt trước mẫu:

{
  "useConfigFiles": true,
  "router": true,
  "vuex": true,
  "cssPreprocessor": "sass",
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "airbnb",
      "lintOn": ["save", "commit"]
    }
  }
}

Dữ liệu cài sẵn được sử dụng bởi trình tạo plugin để tạo các tệp dự án tương ứng. Ngoài các trường trên, bạn cũng có thể thêm cấu hình bổ sung cho các công cụ tích hợp:

{
  "useConfigFiles": true,
  "plugins": {...},
  "configs": {
    "vue": {...},
    "postcss": {...},
    "eslintConfig": {...},
    "jest": {...}
  }
}

Các cấu hình bổ sung này sẽ được hợp nhất vào package.json hoặc các tệp cấu hình tương ứng, tùy thuộc vào giá trị của useConfigFiles. Ví dụ, với "useConfigFiles": true, giá trị của configs.vue sẽ được sáp nhập vào vue.config.js.

#Cài đặt trước phiên bản plugin

Bạn có thể chỉ định rõ các phiên bản của các plugin đang được sử dụng:

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      "version": "^3.0.0",
      // ... các tùy chọn khác cho plugin này
    }
  }
}

Lưu ý điều này là không cần thiết cho các plugin chính thức - khi bỏ qua, CLI sẽ tự động sử dụng phiên bản mới nhất có sẵn trong sổ đăng ký. Tuy nhiên, bạn nên cung cấp phạm vi phiên bản rõ ràng cho bất kỳ plugin của bên thứ ba nào được liệt kê trong cài đặt trước.

#Cho phép lời nhắc plugin

Mỗi plugin có thể đưa vào lời nhắc của chính nó trong quá trình tạo dự án, tuy nhiên khi bạn đang sử dụng một giá trị đặt trước, những lời nhắc đó sẽ bị bỏ qua vì Vue CLI giả định tất cả các tùy chọn plugin đã được khai báo trong cài đặt trước.

Trong một số trường hợp, bạn có thể chỉ muốn cài đặt trước khai báo các plugin mong muốn, đồng thời để lại một số tính linh hoạt bằng cách cho phép người dùng thực hiện các lời nhắc được chèn bởi các plugin.

Đối với các tình huống như vậy, bạn có thể chỉ định "prompts": true trong các tùy chọn của plugin để cho phép các lời nhắc được chèn vào:

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      // nơi người dùng sẽ chọn cấu hình ESLint riêng
      "prompts": true
    }
  }
}

Cài đặt trước từ xa

Bạn có thể chia sẻ một cài đặt trước với các nhà phát triển khác bằng cách xuất bản nó trong một repo git. Repo có thể chứa các tệp sau:

• preset.json: tệp chính chứa dữ liệu được đặt trước (bắt buộc).
• generator.js: Máy phát có thể thêm hoặc sửa đổi các tệp trong dự án.
• prompts.js: một tệp nhắc nhở có thể thu thập các tùy chọn cho trình tạo.

Khi repo được xuất bản, bạn có thể sử dụng tùy chọn --preset để sử dụng giá trị đặt sẵn từ xa khi tạo dự án:

# dùng preset từ GitHub repo
vue create --preset username/repo my-project

GitLab và BitBucket cũng được hỗ trợ. Hãy đảm bảo sử dụng tùy chọn --clone nếu tìm nạp từ các bản repos riêng tư:

vue create --preset gitlab:username/repo --clone my-project
vue create --preset bitbucket:username/repo --clone my-project# Đặt trước

Cài đặt trước hệ thống file cục bộ

Khi phát triển một cài đặt trước từ xa, có thể sẽ khá nhàm chán vì phải liên tục đẩy cài đặt trước đến một repo từ xa để kiểm tra nó. Để đơn giản hóa quy trình làm việc, bạn có thể trực tiếp làm việc với các giá trị đặt sẵn cục bộ. Vue CLI sẽ tải các giá trị đặt trước cục bộ nếu giá trị cho tùy chọn --preset là đường dẫn tệp tương đối hoặc tuyệt đối hoặc kết thúc bằng .json:

# ./my-preset nên là thư mục chứa preset.json
vue create --preset ./my-preset my-project

# hoặc thư mục sử dụng một file json trong cwd:
vue create --preset my-preset.json my-project