Terjemahan skema dan isu pengedaran fail dalam projek VueJS

Question

Saya mula belajar VueJS dan saya menyedari perkara biasa .vue文件由三个不同的部分组成，分别是<template>、<script>和<style>.

Soalan saya ialah tentang cara mengendalikan ketiga-tiga bahagian ini dalam projek profesional sebenar dengan VueJs. Dari pemahaman saya mereka harus dipisahkan kepada tiga bahagian yang berbeza.

Sebagai contoh, saya cenderung untuk memisahkannya dalam folder berikut:

Di bawah folder src, saya akan mencipta subfolder berikut:

src
 ->script（JavaScript函数将在这里定义）
    index.js 
 ->style（样式内容将在这里定义）
    index.css
 ->pages（模板内容将在这里定义）
    index.vue

Adakah ini dikendalikan dalam projek VueJS berskala sederhana hingga besar sebenar? Jika tidak, mengapa? Apakah kebaikan dan keburukan pendekatan ini?

Terima kasih terlebih dahulu atas jawapan anda!

Salam sejahtera,

Paul

Answer 1

Petua yang baik, tentang membaca dokumentasi. Saya tidak menemuinya. Menurut https://vuejs.org/guide/scaling-up/sfc.html#what-about-separation-of-concerns:

Sesetengah pengguna yang datang dari latar belakang pembangunan web tradisional mungkin bimbang bahawa SFC mencampurkan kebimbangan yang berbeza di tempat yang sama - HTML/CSS/JS yang mana harus diasingkan!

Untuk menjawab soalan ini, kita perlu mencapai kata sepakat bahawa pengasingan kebimbangan tidak sama dengan pengasingan jenis fail. Matlamat utama prinsip kejuruteraan adalah untuk meningkatkan kebolehselenggaraan asas kod anda. Menggunakan pengasingan kebimbangan secara tegar pada pengasingan jenis fail tidak membantu kami mencapai matlamat ini dalam persekitaran aplikasi bahagian hadapan yang semakin kompleks.

Dalam pembangunan UI moden, kami mendapati bahawa bukannya membahagikan asas kod kepada tiga lapisan besar yang saling berkait, lebih masuk akal untuk membahagikannya kepada komponen yang digandingkan secara longgar dan menggabungkannya. Dalam komponen, templat, logik dan gayanya digabungkan secara semula jadi, dan meletakkannya bersama sebenarnya menjadikan komponen lebih padu dan boleh diselenggara.

Walaupun anda tidak menyukai idea komponen fail tunggal, anda masih boleh menggunakan Src Imports untuk menggunakan ciri muat semula panas dan pra-penyusunannya pada projek anda dengan mengasingkan JavaScript dan CSS.