Tôi vừa sử dụng dòng lệnh ( CLI) để khởi tạo một dự án Vue.js. Đã CLItạo một src/componentsvà src/viewsthư mục.

Đã một vài tháng kể từ khi tôi làm việc với một dự án Vue và cấu trúc thư mục có vẻ mới đối với tôi.

Sự khác biệt giữa thư mục viewsvà componentsthư mục trong dự án Vue được tạo bằng vue-cligì?

Trước hết, cả hai thư mục src/componentsvà src/views, đều chứa các thành phần Vue.

Sự khác biệt chính là một số thành phần Vue hoạt động như Chế độ xem để định tuyến.

Khi xử lý định tuyến trong Vue, thường là với Vue Router , các tuyến được xác định để chuyển chế độ xem hiện tại được sử dụng trong <router-view>thành phần. Các tuyến đường này thường được đặt tại src/router/routes.js, nơi chúng ta có thể thấy những thứ như sau:

import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

export default [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    component: About,
  },
]

Các thành phần nằm dưới src/componentsít có khả năng được sử dụng trong một tuyến trong khi các thành phần nằm dưới src/viewssẽ được sử dụng bởi ít nhất một tuyến.

Vue CLI nhằm mục đích trở thành cơ sở công cụ tiêu chuẩn cho hệ sinh thái Vue. Nó đảm bảo các công cụ xây dựng khác nhau hoạt động trơn tru cùng với các giá trị mặc định hợp lý để bạn có thể tập trung vào việc viết ứng dụng của mình thay vì dành nhiều ngày loay hoay với các cấu hình. Đồng thời, nó vẫn cung cấp sự linh hoạt để điều chỉnh cấu hình của từng công cụ mà không cần phải tháo ra.

Vue CLI nhằm mục đích phát triển Vue.js nhanh chóng, nó giữ mọi thứ đơn giản và mang lại sự linh hoạt. Mục tiêu của nó là cho phép các nhóm ở các cấp độ kỹ năng khác nhau thiết lập một dự án mới và bắt đầu.

Vào cuối ngày, đó là vấn đề về sự tiện lợi và cấu trúc ứng dụng .

• Một số người muốn có thư mục Chế độ xem của họ src/routergiống như bản soạn thảo doanh nghiệp này .
• Một số người gọi nó là Trang thay vì Chế độ xem .
• Một số người có tất cả các thành phần của họ trong cùng một thư mục.

Chọn cấu trúc ứng dụng phù hợp nhất với dự án bạn đang thực hiện.

Tôi nghĩ nó giống một quy ước hơn. Thứ gì đó có thể tái sử dụng có thể được giữ trong thư mục src / components, thứ gì đó được gắn với bộ định tuyến có thể được giữ trong src / views

Nói chung, các chế độ xem có thể sử dụng lại được đề xuất đặt trong src/componentsthư mục. Ví dụ như Đầu trang, Chân trang, Quảng cáo, Lưới hoặc bất kỳ điều khiển tùy chỉnh nào như hộp văn bản hoặc nút được tạo kiểu. Một hoặc nhiều thành phần có thể được truy cập bên trong một dạng xem.

Chế độ xem có thể có (các) thành phần và chế độ xem thực sự được dự định để được truy cập bằng url điều hướng. Chúng thường được đặt trong src/views.

Hãy nhớ rằng bạn không bị ràng buộc để truy cập các Thành phần qua url. Bạn có thể tự do thêm bất kỳ thành phần nào vào router.jsvà cũng có thể truy cập vào nó. Nhưng nếu bạn định làm như vậy, bạn có thể di chuyển nó đến một src/viewsthay vì đặt nó vào src/components.

Các thành phần là các điều khiển của người dùng tương tự như các biểu mẫu web asp.net.

Nó chỉ là về cấu trúc mã của bạn để bảo trì và dễ đọc hơn.

Cả hai thư mục về cơ bản giống nhau vì cả hai đều chứa các thành phần, nhưng thẩm mỹ của Vue là các thành phần sẽ hoạt động như các trang (được định tuyến thành trang thích để điều hướng) được giữ trong /viewsthư mục, trong khi các thành phần có thể sử dụng lại như trường biểu mẫu được giữ trong /componentsthư mục .