Apa perbedaan antara folder views dan components di proyek Vue?

128

Saya baru saja menggunakan baris perintah ( CLI) untuk menginisialisasi proyek Vue.js. The CLImenciptakan src/componentsdan src/viewsfolder.

Sudah beberapa bulan sejak saya bekerja dengan proyek Vue dan struktur foldernya tampak baru bagi saya.

Apa perbedaan antara folder viewsdan componentsdalam proyek Vue yang dihasilkan vue-cli?

vue.js vuejs2 vue-cli vue-cli-3 vue-cli-4 drsnark
sumber
4
Saya tidak berpikir keduanya berbeda dalam arti bahwa keduanya adalah komponen tampilan file tunggal. Tetapi tampilan halaman Anda (Home.vue, About.vue, Checkout.vue) dapat disimpan terpisah dari komponen Anda (Button.vue, LoadingSpinner.vue, dll)
Jeff
Ini bersinar terang pada perbedaan dalam struktur: blog.pusher.com/new-vue-cli-simplifies-development
connexo
10
@Jeff apakah Anda seorang politikus, jika tidak, Anda seharusnya. Anda baru saja mengulangi pertanyaan Operasi, tetapi berhasil membuatnya tampak seperti jawaban. LOL.
PrestonDocks

Jawaban:

177

Pertama-tama, kedua folder tersebut, src/componentsdan src/views, berisi komponen Vue.

Perbedaan utamanya adalah bahwa beberapa komponen Vue bertindak sebagai Tampilan untuk perutean.

Ketika berhadapan dengan routing Vue, biasanya dengan Vue Router , rute didefinisikan untuk mengganti saat pandangan yang digunakan dalam <router-view>komponen. Rute ini biasanya terletak di src/router/routes.js, di mana kita dapat melihat sesuatu seperti ini:

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,
  },
]

Komponen yang terletak di bawah src/componentscenderung tidak digunakan dalam suatu rute sedangkan komponen yang terletak di bawah src/viewsakan digunakan oleh setidaknya satu rute.

Vue CLI bertujuan untuk menjadi dasar perkakas standar untuk ekosistem Vue. Ini memastikan berbagai alat build bekerja dengan lancar bersama dengan default yang masuk akal sehingga Anda dapat fokus menulis aplikasi alih-alih menghabiskan waktu berhari-hari bertengkar dengan konfigurasi. Pada saat yang sama, ia masih menawarkan fleksibilitas untuk mengubah konfigurasi setiap alat tanpa perlu mengeluarkan.

Vue CLI bertujuan untuk pengembangan Vue.js yang cepat, membuatnya tetap sederhana dan menawarkan fleksibilitas. Tujuannya adalah untuk memungkinkan tim dari berbagai tingkat keahlian untuk membuat proyek baru dan memulai.

Pada akhirnya, ini adalah masalah kenyamanan dan struktur aplikasi .

  • Beberapa orang ingin memiliki folder Views di bawah boilerplate perusahaan src/routerseperti ini .
  • Beberapa orang menyebutnya Halaman, bukan Tampilan .
  • Beberapa orang memiliki semua komponennya di bawah folder yang sama.

Pilih struktur aplikasi yang paling sesuai dengan proyek yang sedang Anda kerjakan.

Ricky
sumber
6
Ini 100% benar. Anda dapat menyusun aplikasi Anda dengan cara apa pun yang masuk akal bagi Anda. Saya pribadi menggunakan "src / halaman" untuk semua rute. Di folder itu, saya akan membuat sub-folder untuk setiap "area" situs. Contoh "src / halaman / pertanyaan" dan di folder itu, saya akan memiliki index.vue yang akan memiliki daftar pertanyaan. Saya akan memiliki add.vue yang akan menjadi halaman untuk menambahkan pertanyaan, dll. "Halaman" ini biasanya hanya mengumpulkan komponen yang diperlukan untuk membuat "halaman". Di folder "src / komponen" saya, saya akan membuat subfolder untuk hal-hal seperti navigasi, elemen formulir, komponen bersama khusus, dll ...
Tim Wickstrom
Saya berasumsi komponen seperti jendela Popup / Modal masuk ke src/componentskonvensi ini?
Simon Thiel
@Ricky, Bolehkah saya meminta Anda untuk melihat pertanyaan Vue.JS terkait dengan kode sumber di github dari buku 'Full-Stack Vue.js 2 dan Laravel 5' oleh Anthone Gore di sini: stackoverflow.com/questions/ 59245577 /… ? Terutama lihat bagian EDIT: dari OP
Istiaque Ahmed
Bisakah kita mengatakan bahwa komponen di dalam tampilan adalah kumpulan komponen? Misalnya, tampilan daftar saya dapat memiliki beberapa komponen dan komponen ini ditempatkan / dibungkus di dalam satu komponen dalam tampilan?
Aayush
20

Saya pikir ini lebih merupakan konvensi. Sesuatu yang dapat digunakan kembali dapat disimpan di folder src / komponen, sesuatu yang terkait dengan router dapat disimpan di src / views

Ravi
sumber
6

Umumnya tampilan yang dapat digunakan kembali disarankan untuk ditempatkan di src/componentsdirektori. Contoh seperti Header, Footer, Ads, Grids atau kontrol kustom seperti kotak teks atau tombol bergaya. Satu atau lebih komponen dapat diakses di dalam tampilan.

Tampilan dapat memiliki komponen dan tampilan sebenarnya dimaksudkan untuk diakses oleh url navigasi. Mereka umumnya ditempatkan di src/views.

Ingatlah bahwa Anda tidak dibatasi untuk mengakses Komponen melalui url. Anda bebas menambahkan komponen apa pun ke router.jsdan mengaksesnya juga. Tetapi jika Anda memang bermaksud melakukannya, Anda dapat memindahkannya ke a src/viewsdaripada menempatkannya di src/components.

Komponen adalah kontrol pengguna dalam analogi dengan formulir web asp.net.

Ini hanya tentang menyusun kode Anda untuk pemeliharaan dan keterbacaan yang lebih baik.

navule
sumber
1

Kedua folder pada dasarnya sama karena keduanya menyimpan komponen, tetapi estetika Vue adalah bahwa komponen yang akan berfungsi sebagai halaman (diarahkan ke halaman seperti untuk navigasi) disimpan di /viewsfolder, sedangkan komponen yang dapat digunakan kembali seperti bidang formulir disimpan di /componentsfolder .

Chinedu Chaz
sumber