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)

5
  • 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
    Commented Jun 9, 2020 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 Commented Jun 9, 2020 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
    Commented Jun 9, 2020 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 Commented Jun 9, 2020 at 12:35
  • 1
    I would prefer second approach so you can find relevant code of that module easly
    – Ishan Shah
    Commented Jun 16, 2020 at 8:05

2 Answers 2

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
3
  • 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. Commented Jun 9, 2020 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. Commented Jun 9, 2020 at 14:40
  • Aha, i got the point. thank you Commented Jun 9, 2020 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.

1
  • I'm not sure your first question is necessary - the question seems to already assume that the files will be split. Commented Jun 16, 2020 at 14:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.