Cách cấu trúc dự án Vue.js

Cấu trúc thư mục và cấu trúc thư mục Vue.js hoàn hảo với các thành phần thông minh và ngu ngốc

Vue.js không chỉ là một sự cường điệu, nó là một khung công tác tuyệt vời. Nó rất dễ dàng để bắt đầu với nó và xây dựng một ứng dụng web. Vue.js thường được mô tả như một khung cho các ứng dụng nhỏ và thậm chí đôi khi là một thay thế cho jQuery vì kích thước nhỏ của nó! Cá nhân tôi nghĩ rằng nó cũng có thể phù hợp với các dự án lớn hơn và trong trường hợp này, nó rất quan trọng để cấu trúc nó tốt, về mặt kiến ​​trúc thành phần.

Trước khi bắt đầu dự án Vue.js lớn đầu tiên của mình, tôi đã thực hiện một số nghiên cứu để tìm cấu trúc thư mục hoàn hảo, kiến ​​trúc thành phần và quy ước đặt tên. Tôi đã xem qua tài liệu Vue.js, một vài bài viết và nhiều dự án nguồn mở GitHub.

Tôi cần tìm câu trả lời cho một vài câu hỏi mà tôi có. Đó là những gì bạn sẽ tìm thấy trong bài viết này:

  • Làm thế nào để bạn cấu trúc các tệp và thư mục bên trong dự án Vue.js?
  • Làm thế nào để bạn viết các thành phần thông minh và ngu ngốc và bạn đặt chúng ở đâu? Nó có một khái niệm đến từ React.
  • Phong cách mã hóa Vue.js và thực tiễn tốt nhất là gì?

Tôi cũng sẽ ghi lại với nguồn mà tôi lấy cảm hứng và các liên kết khác để hiểu rõ hơn.

Cấu trúc thư mục Vue.js

Đây là nội dung của thư mục src. Tôi khuyên bạn nên khởi động dự án với Vue CLI. Cá nhân tôi đã sử dụng mẫu Webpack mặc định.

.
├── app.css
├── App.vue
Tài sản
│ └── ...
Các thành phần
│ └── ...
├── main.js
Các loại hỗn hợp
│ └── ...
Bộ định tuyến
Index ─── index.js
Cửa hàng
Index ─── index.js
Các mô-đun
│ │ └ ...
└── đột biến-type.js
Bản dịch
Index ─── index.js
Đồ dùng
│ └── ...
Lượt xem
    └── ...

Một vài chi tiết về mỗi thư mục này:

  • tài sản - Nơi bạn đặt bất kỳ tài sản nào được nhập vào các thành phần của bạn
  • các thành phần - Tất cả các thành phần của các dự án không phải là quan điểm chính
  • mixins - Các mixin là các phần của mã javascript được sử dụng lại trong các thành phần khác nhau. Trong một mixin, bạn có thể đặt bất kỳ phương thức thành phần nào từ Vue.js, chúng sẽ được hợp nhất với các phương thức của thành phần sử dụng nó.
  • bộ định tuyến - Tất cả các tuyến của các dự án của bạn (trong trường hợp của tôi, tôi có chúng trong tệp index.js). Về cơ bản trong Vue.js mọi thứ đều là một thành phần. Nhưng không phải tất cả mọi thứ là một trang. Một trang có một tuyến đường giống như là Tweet / bảng điều khiển, Nếu một thành phần có một tuyến đường, nó được định tuyến.
  • cửa hàng (tùy chọn) - Các hằng số Vuex trong m mut-type.js, các mô đun Vuex trong các mô đun thư mục con (sau đó được tải trong index.js).
  • bản dịch (tùy chọn) - Các tệp địa phương, tôi sử dụng Vue-i18n và nó hoạt động khá tốt.
  • utils (tùy chọn) - Các hàm mà tôi sử dụng trong một số thành phần, chẳng hạn như kiểm tra giá trị regex, hằng hoặc bộ lọc.
  • Lượt xem Để làm cho dự án nhanh hơn để đọc Tôi tách các thành phần được định tuyến và đặt chúng vào thư mục này. Các thành phần được định tuyến cho tôi không chỉ là một thành phần vì chúng đại diện cho các trang và chúng có các tuyến đường, tôi đặt chúng trong các lượt xem của Wap sau đó khi bạn kiểm tra một trang bạn vào thư mục này.

Cuối cùng, bạn có thể thêm các thư mục khác tùy theo nhu cầu của mình, chẳng hạn như bộ lọc hoặc hằng số, API.

Một số tài nguyên tôi lấy cảm hứng từ

  • https://vuex.vuejs.org/en/structure.html
  • https://github.com/vuejs/vue-hackernews-2.0/tree/master/src
  • https://github.com/mframleraz/realworld-vue/tree/master/src

Các thành phần thông minh và câm với Vue.js

Thành phần thông minh và ngu ngốc là một khái niệm tôi học được từ React. Các thành phần thông minh cũng được gọi là container, chúng là những người xử lý các thay đổi trạng thái, chúng chịu trách nhiệm về cách mọi thứ hoạt động. Ngược lại, các thành phần câm, còn được gọi là trình bày, chỉ xử lý giao diện.

Nếu bạn quen thuộc với mẫu MVC, bạn có thể so sánh các thành phần kết xuất với Chế độ xem và thành phần thông minh với Bộ điều khiển!

Trong React, các thành phần thông minh và câm thường được đặt trong các thư mục khác nhau trong khi trong Vue.js bạn đặt tất cả chúng trong cùng một thư mục: các thành phần. Để phân biệt trong Vue.js, bạn sẽ sử dụng quy ước đặt tên. Hãy để nói rằng bạn có một thành phần thẻ câm, sau đó bạn nên sử dụng một trong những tên sau:

  • Thẻ cơ sở
  • Thẻ ứng dụng
  • Vard

Nếu bạn có một thành phần thông minh sử dụng BaseCard và thêm một số phương thức cho nó, bạn có thể đặt tên cho nó, tùy thuộc vào dự án của bạn:

  • Hồ sơ cá nhân
  • Thẻ vật phẩm
  • Thẻ tin tức

Ví dụ, nếu thành phần thông minh của bạn không chỉ là Thẻ thông minh cơ sở của Smarter, có thể sử dụng bất kỳ tên nào phù hợp với thành phần của bạn và không bắt đầu với Base (hoặc Ứng dụng hoặc V), ví dụ:

  • Bảng điều khiển
  • Kết quả tìm kiếm
  • Thông tin người dùng

Quy ước đặt tên này xuất phát từ bản định kiểu chính thức của Vue.js cũng chứa các quy ước đặt tên!

Quy ước đặt tên

Dưới đây là một số quy ước đến từ văn bản chính thức của Vue.js mà bạn cần cấu trúc tốt dự án của mình:

  • Tên thành phần phải luôn luôn là nhiều từ, ngoại trừ các thành phần gốc App App. Ví dụ, hãy sử dụng Thẻ người dùng của người dùng trực tuyến hay
  • Mỗi thành phần nên có trong tập tin riêng của mình.
  • Tên tệp của các thành phần tệp đơn phải luôn là PascalCase hoặc luôn là kebab-case. Sử dụng Thẻ người dùng của người dùng.v.v.
  • Các thành phần chỉ được sử dụng một lần trên mỗi trang nên bắt đầu bằng tiền tố The The, để biểu thị rằng chỉ có thể có một. Ví dụ: đối với thanh điều hướng hoặc chân trang, bạn nên sử dụng TheNavbar.vue và hoặc TheFooter.vue.
  • Các thành phần con nên bao gồm tên cha của chúng làm tiền tố. Ví dụ: nếu bạn muốn một thành phần của Photo Photo, được sử dụng trong Thẻ người dùng, bạn sẽ đặt tên cho nó là Thẻ người dùng. Nó có khả năng đọc tốt hơn vì các tệp trong thư mục thường được sắp xếp theo thứ tự abc.
  • Luôn sử dụng tên đầy đủ thay vì viết tắt trong tên của các thành phần của bạn. Ví dụ don don sử dụng Tiếng Nhật UDS Cài đặt, thay vào đó, hãy sử dụng Thay thế UserDashboardSinstall.

Phong cách chính thức của Vue.js

Cho dù bạn là người mới bắt đầu hay người mới bắt đầu sử dụng Vue.js, bạn nên đọc bản định kiểu Vue.js này, nó chứa rất nhiều mẹo và cả quy ước đặt tên. Nó chứa rất nhiều ví dụ về những điều nên làm và không nên làm.

Nếu bạn thích bài đăng này, vui lòng nhấp vào nút bấm bên dưới một vài lần để thể hiện sự hỗ trợ của bạn! Ngoài ra, hãy bình luận và đưa ra bất kỳ loại phản hồi. Đừng quên đi theo tôi!

Bạn muốn xem nhiều bài viết như thế này? Ủng hộ tôi trên Patreon