I started learning VueJS and I realized that a typical .vue file consists of three different parts, which are <template>, <script> and <style>.
My question is about how to handle these three parts in a real professional project with VueJs. From my understanding they should be separated into three different parts.
For example, I would tend to separate them in the following folders:
Under the src folder, I will create the following subfolders:
src
->script（JavaScript函數(shù)將在這里定義）
index.js
->style（樣式內(nèi)容將在這里定義）
index.css
->pages（模板內(nèi)容將在這里定義）
index.vue
Is this handled in real medium- to large-scale VueJS projects? If not, why? What are the pros and cons of this approach?
Thank you in advance for your answers!
best regards,
Paul
1
0
0
Good tip, about reading the documentation. I didn't find it. According to https://vuejs.org/guide/scaling-up/sfc.html#what-about-separation-of-concerns:
Some users who come from traditional web development backgrounds may worry that SFC mixes different concerns in the same place - which HTML/CSS/JS should be separated from!
To answer this question, we need to reach a consensus that separation of concerns is not equivalent to separation of file types. The ultimate goal of engineering principles is to improve the maintainability of your code base. Applying the separation of concerns rigidly to the separation of file types does not help us achieve this goal in an increasingly complex front-end application environment.
In modern UI development, we find that instead of dividing the code base into three huge intertwined layers, it makes more sense to divide it into loosely coupled components and combine them. Within a component, its templates, logic, and styles are inherently coupled, and putting them together actually makes the component more cohesive and maintainable.
Even if you don’t like the idea of ??single-file components, you can still use Src Imports to apply its hot reload and precompilation features to your project by separating JavaScript and CSS.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
