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?

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.

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

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.

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 .