VueJS: Single File Components

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Giới thiệu

Trong nhiều dự án Vue, các thành phần toàn cầu sẽ được xác định bằng cách sử dụng Vue.component, tiếp theo là new Vue({ el: '#container' })nhắm mục tiêu phần tử vùng chứa trong phần thân của mỗi trang.

Điều này có thể hoạt động rất tốt cho các dự án vừa và nhỏ, trong đó JavaScript chỉ được sử dụng để tăng cường một số lượt xem nhất định. Tuy nhiên, trong các dự án phức tạp hơn, hoặc khi giao diện người dùng của bạn hoàn toàn được điều khiển bởi JavaScript, những nhược điểm này trở nên rõ ràng:

  • Định nghĩa toàn cầu buộc tên duy nhất cho mọi thành phần
  • Các mẫu chuỗi thiếu làm nổi bật cú pháp và yêu cầu các dấu gạch chéo xấu xí cho HTML đa luồng
  • Không hỗ trợ CSS có nghĩa là trong khi HTML và JavaScript được mô đun hóa thành các thành phần, CSS được bỏ qua một cách dễ thấy
  • Không có bước xây dựng nào hạn chế chúng tôi đối với JavaScript HTML và ES5, thay vì các trình tiền xử lý như Pug (trước đây là Jade) và Babel

Tất cả các thành phần này được giải quyết bằng các thành phần tệp đơn với .vuephần mở rộng, có thể thực hiện được bằng các công cụ xây dựng như Webpack hoặc Browserify.

Dưới đây là ví dụ về tệp chúng tôi sẽ gọi Hello.vue:

Bây giờ chúng tôi nhận được:

Như đã hứa, chúng tôi cũng có thể sử dụng các bộ tiền xử lý như Pug, Babel (với các mô-đun ES2015) và Stylus để có các thành phần phong phú hơn và có nhiều tính năng hơn.

Những ngôn ngữ cụ thể này chỉ là những ví dụ. Bạn có thể dễ dàng sử dụng Bublé, TypeScript, SCSS, PostCSS - hoặc bất kỳ bộ tiền xử lý nào khác giúp bạn làm việc hiệu quả. Nếu sử dụng Webpack vue-loader, nó cũng có hỗ trợ lớp đầu tiên cho CSS Module.

Điều gì về tách mối quan tâm?

Một điều quan trọng cần lưu ý là việc tách các mối quan tâm không bằng tách các loại tệp. Trong phát triển giao diện người dùng hiện đại, chúng tôi thấy rằng thay vì chia codebase thành ba lớp lớn đan xen lẫn nhau, điều này có ý nghĩa hơn nhiều khi chia chúng thành các thành phần được ghép lỏng lẻo và soạn chúng. Bên trong một thành phần, mẫu, logic và phong cách của nó vốn đã được ghép đôi và thu thập chúng thực sự làm cho thành phần gắn kết và bảo trì hơn.

Thậm chí nếu bạn không thích ý tưởng về các thành phần tệp đơn, bạn vẫn có thể tận dụng các tính năng tải lại và biên dịch sẵn của nó bằng cách tách JavaScript và CSS của bạn thành các tệp riêng biệt:

<! - my-component.vue -> 
< template > < div > Điều này sẽ được biên dịch trước </ div > </ template > < script src = "./my-component.js" >
  

 </ script > 
< style  src = "./my-component.css" ></ style >

Bắt đầu

Sandbox mẫu

Nếu bạn muốn đi sâu vào bên trong và bắt đầu chơi với các thành phần một tệp, hãy xem ứng dụng cần làm đơn giản này trên CodeSandbox.

Dành cho người dùng mới cho hệ thống xây dựng mô-đun trong JavaScript

Với .vuecác thành phần, chúng ta đang bước vào lĩnh vực ứng dụng JavaScript nâng cao. Điều đó có nghĩa là học cách sử dụng một vài công cụ bổ sung nếu bạn chưa:

  • Trình quản lý gói Node (NPM) : Đọc Hướng dẫn bắt đầu thông qua phần 10: Gỡ cài đặt các gói toàn cầu .

  • JavaScript hiện đại với ES2015 / 16 : Đọc qua hướng dẫn Học tập ES2015 của Babel . Bạn không cần phải ghi nhớ mọi tính năng ngay bây giờ, nhưng hãy giữ trang này làm tài liệu tham khảo mà bạn có thể quay lại.

Sau khi bạn đã dành một ngày để tìm hiểu các tài nguyên này, chúng tôi khuyên bạn nên xem mẫu webpack . Thực hiện theo các hướng dẫn và bạn sẽ có một dự án Vue với .vuecác thành phần, ES2015 và tải lại nóng trong thời gian không!

Để tìm hiểu thêm về Webpack, hãy xem tài liệu chính thức của họ và Học viện Webpack . Trong Webpack, mỗi tập tin có thể được chuyển đổi bởi một "bộ tải" trước khi được bao gồm trong gói, và Vue cung cấp các plugin vue-loader để dịch .vuecác thành phần đơn ( ).

Dành cho người dùng nâng cao

Cho dù bạn thích Webpack hay Browserify, chúng tôi đều có các mẫu tài liệu cho cả các dự án đơn giản và phức tạp hơn. Chúng tôi khuyên bạn nên duyệt github.com/vuejs-templates , chọn mẫu phù hợp với bạn, sau đó làm theo hướng dẫn trong README để tạo dự án mới với vue-cli .

» Tiếp: Unit test
« Trước: Triển khai cho môi trường production
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!