1

I have developed an open-source vue.js scaffold which is based on my exprience and study on various vuejs projects.

Currently it has a good structure(i think), but i'm nervous about is it good enough for a chat scaffold and the goal of this question is about where is the better place for scss files in this scaffold?

I want to know about your opinion with explanation, because i believe a good scaffold will help a lot to develop better web apps.

https://github.com/SeyyedKhandon/vuejs-persian-chat-scaffold/tree/develop

first one:

I think this is more manageable and reuse-able.

enter image description here

second one:

I think this will increase the speed of develop( by reduceing the time of going through other places to find the corresponding files)

![enter image description here]

third one

other opinion(tell me about)

SeyyedKhandon
  • 241
  • 2
  • 8
  • 1
    This question is likely to get closed due to opinion based answers. Either way, I'd have preferred the second approach of the two presented, i.e. the style files along the `.vue` files, effectively using the package by feature approach. – Andy Jun 09 '20 at 12:08
  • Thank you for the comment, well can you tell me how to fix the question or tell me where is the right place to put this question? i think this is kind of related to software quality by better developing approach – SeyyedKhandon Jun 09 '20 at 12:19
  • I am not sure, to be honest. Perhaps you could do a research on your own, figuring out the possible (dis)advantages of the package by feature approach, and go from there. – Andy Jun 09 '20 at 12:25
  • Actually i researched about it a lot and studied a lot of admin templates and other opensource projects ( at-least 10 admin templates and 10 other open source projects). all of them have used various methods but there is no clear explanation about it why are they using that, and it seems they did based on their experience. Now i really want to know about other developers about their opinion and explanation to this problem – SeyyedKhandon Jun 09 '20 at 12:35
  • 1
    I would prefer second approach so you can find relevant code of that module easly – Ishan Shah Jun 16 '20 at 08:05

2 Answers2

1

I personally prefer the first one. but if page and layout are components, it can be nested inside the component folder.

style folder in the asset will look like this:

  • global
    • bootstrap
    • material
    • fontawesome
  • app
    • src
      • mixins
      • variables
      • z-admin
      • z-components
        • _form
          • _tag.scss (npm package included and customized)
          • form.scss
        • _page
        • _layout
        • _tool
        • _tostify.scss (npm package)
        • components.scss
      • z-print
      • z-template
      • _animation.scss
      • _common.scss
      • _shadow.scss
      • _z-index.scss
      • main.scss
    • skin-default
    • skin-orange
hamidreza kazemi
  • 11
  • 1
  • Can you tell me why do you prefer the first one? is it more manageable? it would be very good if you explain the purpose and your experience about it. – SeyyedKhandon Jun 09 '20 at 12:43
  • 1
    with this structure, I can create a really fast and ready boilerplate project and it doesn't depend on any javascript framework or library, I can look at it as a layer of my app (style layer), like persist or service layer. – hamidreza kazemi Jun 09 '20 at 14:40
  • Aha, i got the point. thank you – SeyyedKhandon Jun 09 '20 at 14:45
1

I have limited vue.js experience. I will ask a question and answer it for you.

Q: why not using "Single File Components"?
A: Some components would require very large files and including styles, will make them even larger. As a result of this, readability and maintainability will be getting harder.
Q: so what should we do then?
A: I suggest you separate component styles and template to SCSS and HTML files and import them in your components, then put these 3 and a test file beside them in a folder with the component name. then you will have a folder which contains all things you need and you can take it anywhere you want.
Then you can have any kind of folder structure for your application to adopt.

Homam
  • 111
  • 3