Question

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)

No correct solution

OTHER TIPS

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

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.

Licensed under: CC-BY-SA with attribution
scroll top