Vue.js

Appearance

On this page

Tooling ​

Thử Nghiệm Trực Tuyến ​

Bạn không cần cài đặt bất cứ thứ gì trên máy của bạn để thử nghiệm Vue SFCs - có các sân chơi trực tuyến cho phép bạn làm điều này ngay trong trình duyệt:

  • Vue SFC Playground
    • Luôn triển khai từ commit mới nhất
    • Được thiết kế để kiểm tra kết quả biên dịch của thành phần
  • Vue + Vite trên StackBlitz
    • Môi trường giống IDE chạy máy chủ phát triển Vite thực sự trong trình duyệt
    • Gần giống với cài đặt cục bộ

Cũng nên sử dụng các sân chơi trực tuyến này để tạo ra các bản sao khi báo cáo lỗi.

Xây Dựng Dự Án ​

Vite ​

Vite là một công cụ xây dựng nhẹ và nhanh chóng với sự hỗ trợ ưu tiên cho Vue SFC. Nó được tạo ra bởi Evan You, người cũng là tác giả của Vue!

Để bắt đầu với Vite + Vue, chỉ cần chạy:

sh
$ npm create vue@latest

Lệnh này sẽ cài đặt và thực thi create-vue, công cụ tạo dự án chính thức của Vue.

  • Để tìm hiểu thêm về Vite, hãy kiểm tra tài liệu Vite.
  • Để cấu hình hành vi cụ thể của Vue trong một dự án Vite, ví dụ như truyền các tùy chọn cho trình biên dịch Vue, hãy kiểm tra tài liệu cho @vitejs/plugin-vue.

Cả hai sân chơi trực tuyến được đề cập ở trên cũng hỗ trợ tải xuống tệp tin như một dự án Vite.

Vue CLI ​

Vue CLI là bộ công cụ chính thức dựa trên webpack cho Vue. Nó hiện đang ở chế độ bảo trì và chúng tôi khuyến nghị bắt đầu dự án mới với Vite trừ khi bạn phụ thuộc vào các tính năng chỉ có trong webpack. Trong hầu hết các trường hợp, Vite sẽ cung cấp trải nghiệm phát triển tốt hơn.

Để biết thông tin về di chuyển từ Vue CLI sang Vite:

Ghi Chú về Biên Dịch Mẫu Trực Tuyến ​

Khi sử dụng Vue mà không có bước biên dịch, các mẫu thành phần được viết trực tiếp trong HTML của trang hoặc dưới dạng chuỗi JavaScript nằm trong đó. Trong trường hợp như vậy, Vue cần gửi trình biên dịch mẫu đến trình duyệt để thực hiện biên dịch mẫu ngay lúc chạy. Ngược lại, trình biên dịch sẽ không cần thiết nếu chúng ta biên dịch trước các mẫu với một bước biên dịch. Để giảm kích thước bảng gói của máy khách, Vue cung cấp các "build" được tối ưu hóa cho các trường hợp sử dụng khác nhau.

  • Các tệp build bắt đầu bằng vue.runtime.* là các bản build chỉ chạy thời gian thực: chúng không bao gồm trình biên dịch. Khi sử dụng các bản build này, tất cả mẫu phải được biên dịch trước qua bước biên dịch.

  • Các tệp build không bao gồm .runtime là các bản build đầy đủ: chúng bao gồm trình biên dịch và hỗ trợ biên dịch mẫu trực tiếp trong trình duyệt. Tuy nhiên, chúng sẽ làm tăng dung lượng bảng gói khoảng ~14kb.

Cài đặt mặc định của chúng ta sử dụng bản build chỉ chạy thời gian thực vì tất cả các mẫu trong SFCs đã được biên dịch trước. Nếu, vì một lý do nào đó, bạn cần biên dịch mẫu trong trình duyệt ngay cả với bước biên dịch, bạn có thể làm như vậy bằng cách cấu hình công cụ biên dịch để alias vue thành vue/dist/vue.esm-bundler.js thay vì.

Nếu bạn đang tìm kiếm một lựa chọn nhẹ h

ơn cho việc không sử dụng bước biên dịch, hãy kiểm tra petite-vue.

Hỗ Trợ IDE ​

  • Cài đặt IDE được khuyến nghị là VSCode + tiện ích mở rộng Vue Language Features (Volar). Tiện ích mở rộng cung cấp tô màu cú pháp, hỗ trợ TypeScript và thông minh cho biểu thức mẫu và thuộc tính của thành phần.

    TIP

    Volar thay thế cho Vetur, tiện ích mở rộng VSCode chính thức trước đó cho Vue 2. Nếu bạn đã cài đặt Vetur, hãy đảm bảo tắt nó trong các dự án Vue 3.

  • WebStorm cũng cung cấp hỗ trợ tích hợp tốt cho Vue SFCs.

  • Các IDE khác hỗ trợ Language Service Protocol (LSP) cũng có thể tận dụng các chức năng cơ bản của Volar qua LSP:

Công Cụ Phát Triển Trình Duyệt ​

<Liên KếtVueSchool href="https://vueschool.io/lessons/using-vue-dev-tools-with-vuejs-3" title="Bài Học Vue.js Devtools Miễn Phí"/>

Phần mở rộng trình duyệt Vue cho phép bạn khám phá cây thành phần của ứng dụng Vue, kiểm tra trạng thái của các thành phần cá nhân, theo dõi sự kiện quản lý trạng thái và phân tích hiệu suất.

screenshot của devtools

TypeScript ​

Bài viết chính: Sử Dụng Vue với TypeScript.

  • Volar cung cấp kiểm tra kiểu cho SFCs sử dụng các khối <script lang="ts">, bao gồm biểu thức mẫu và xác nhận thuộc tính chéo thành phần.

  • Sử dụng vue-tsc để thực hiện kiểm tra kiểu từ dòng lệnh, hoặc để tạo ra tệp d.ts cho SFCs.

Kiểm Thử ​

Bài viết chính: Hướng Dẫn Kiểm Thử.

  • Cypress được khuyến nghị cho kiểm thử E2E. Nó cũng có thể được sử dụng cho kiểm thử thành phần cho Vue SFCs qua Trình Chạy Kiểm Thử Thành Phần Cypress.

  • Vitest là một trình chạy kiểm thử được tạo ra bởi các thành viên của nhóm Vue / Vite tập trung vào tốc độ. Nó được thiết kế đặc biệt cho ứng dụng dựa trên Vite để cung cấp vòng phản hồi tức thì tương tự khi kiểm thử đơn vị / thành phần.

  • Jest có thể được làm việc với Vite qua vite-jest. Tuy nhiên, điều này chỉ được khuyến nghị nếu bạn có bộ kiểm thử Jest hiện tại và cần di chuyển chúng sang cài đặt dựa trên Vite, vì Vitest cung cấp các chức năng tương tự với tích hợp hiệu quả hơn nhiều.

Kiểm Thử ​

Bài viết chính: Hướng Dẫn Kiểm Thử.

  • Cypress được khuyến nghị cho kiểm thử E2E. Nó cũng có thể được sử dụng cho kiểm thử thành phần cho Vue SFCs thông qua Trình Chạy Kiểm Thử Thành Phần Cypress.

  • Vitest là một trình chạy kiểm thử được tạo ra bởi các thành viên của nhóm Vue / Vite tập trung vào tốc độ. Nó được thiết kế đặc biệt cho ứng dụng dựa trên Vite để cung cấp vòng phản hồi tức thì tương tự khi kiểm thử đơn vị / thành phần.

  • Jest có thể được làm việc với Vite qua vite-jest. Tuy nhiên, điều này chỉ được khuyến nghị nếu bạn có bộ kiểm thử Jest hiện tại và cần di chuyển chúng sang cài đặt dựa trên Vite, vì Vitest cung cấp các chức năng tương tự với tích hợp hiệu quả hơn nhiều.

Linting ​

Nhóm Vue duy trì eslint-plugin-vue, một plugin ESLint hỗ trợ các quy tắc linting cụ thể cho SFC.

Người dùng trước đây sử dụng Vue CLI có thể quen với việc cấu hình linters thông qua webpack loaders. Tuy nhiên, khi sử dụng bộ cài đặt xây dựng dựa trên Vite, khuyến nghị chung của chúng tôi là:

  1. npm install -D eslint eslint-plugin-vue, sau đó làm theo hướng dẫn cấu hình của eslint-plugin-vue.

  2. Cài đặt các tiện ích mở rộng IDE ESLint, ví dụ như ESLint for VSCode, để bạn nhận được phản hồi linting ngay trong trình soạn thảo của bạn khi phát triển. Điều này cũng tránh chi phí linting không cần thiết khi bắt đầu máy chủ phát triển.

  3. Chạy ESLint như một phần của lệnh xây dựng sản phẩm, để bạn nhận được toàn bộ phản hồi linting trước khi gửi sản phẩm ra môi trường sản xuất.

  4. (Tùy chọn) Cài đặt các công cụ như lint-staged để tự động lint các tệp đã được sửa đổi khi commit vào git.

Định Dạng ​

  • Tiện ích mở rộng Volar cho VSCode cung cấp định dạng cho Vue SFCs ngay khi cài đặt.

  • Hoặc, Prettier cung cấp sự hỗ trợ định dạng tích hợp cho Vue SFCs.

Tích Hợp Khối Tùy Chỉnh SFC ​

Khối tùy chỉnh được biên dịch thành các nhập khẩu vào cùng một tệp Vue với các truy vấn yêu cầu khác nhau. Điều này là trách nhiệm của công cụ xây dựng cơ bản để xử lý các yêu cầu nhập khẩu này.

  • Nếu sử dụng Vite, nên sử dụng một plugin Vite tùy chỉnh để chuyển đổi các khối tùy chỉnh được khớp thành mã JavaScript có thể thực thi. Ví dụ

  • Nếu sử dụng Vue CLI hoặc webpack thuần, cần cấu hình một loader webpack để chuyển đổi các khối được khớp. Ví dụ

Các Gói Cấp Thấp Hơn ​

@vue/compiler-sfc ​

Gói này là một phần của tổ hợp lõi của Vue và luôn được xuất bản với cùng một phiên bản như gói chính vue. Nó được bao gồm như một phụ thuộc của gói vue chính và được proxy dưới vue/compiler-sfc để bạn không cần phải cài đặt nó cá nhân.

Gói này cung cấp các tiện ích cấp thấp hơn để xử lý Vue SFCs và chỉ dành cho các tác giả công cụ cần hỗ trợ Vue SFCs trong các công cụ tùy chỉnh.

TIP

Luôn ưu tiên việc sử dụng gói này qua việc nhập sâu vue/compiler-sfc vì điều này đảm bảo rằng phiên bản của nó đồng bộ với Vue runtime.

@vitejs/plugin-vue ​

-vue)

Plugin chính thức cung cấp hỗ trợ Vue SFC trong Vite.

vue-loader ​

Loader chính thức cung cấp hỗ trợ Vue SFC trong webpack. Nếu bạn đang sử dụng Vue CLI, hãy xem thêm tài liệu về cách sửa đổi các tùy chọn của vue-loader trong Vue CLI.

Các Sân Chơi Trực Tuyến Khác ​