search

pablohpsilva / vuejs-component-style-guide

Vue.js Component Style Guide
https://pablohpsilva.github.io/vuejs-component-style-guide
2.86k stars 337 forks source link

Application structure ? #50

Open Trekels opened 7 years ago

Trekels commented 7 years ago

A section showing best practice application structure. I'll setup a pull request if you think its a good idea 😄

. | ── build/ # exported app files | |--- ... | -- src/ | | -- app.js # app entry file | |-- components/ # Vue components | │ | ---- ... | | --- assets/ # module assets (processed by webpack) | | --- ... | -- index.html # index.html template --- package.json # build scripts and dependencies

wosubtil commented 7 years ago

Hi @Trekels I wrote about this: https://github.com/pablohpsilva/vuejs-component-style-guide/issues/42

@pablohpsilva I think we can continue here, okay?

Trekels commented 7 years ago

@welintonti Thanks for linking to the issue I totally missed it, will got through it and add a pull request.

Elfayer commented 7 years ago

Personally, my application structure is the same as the one given by vue-cli webpack. I just added few folders to make it better to my usage:

/src (Default) --/assets (Default) --/components (Default, all reusable components) --/i18n (Containing trads ordered with folder by page or language. Also has an index.js to import vue-i18n easily) --/mixins (Contain reusable mixins) --/pages (Same as components, but this one is for root components, actually pages. I preferred to distinguish entry components from basic ones. This one should not have parents) --/router (Default) --/store (Added using the same pattern as for /router, so it has an index.js to easily import and other files at root for modules. Would consider sub-folders if too many modules were written) --/stylesheets (This folder contain all the generic style for inputs, buttons, etc. This files are imported in App.vue only once in the application) _main.scss (This file is here because I use SCSS, it contains all the variables and mixins to be reused in any other component, so this one is most of the time imported in every components. But since it's just variables and mixins, there is no duplicate at all. It disappear after compilation of the SCSS. I'd consider adding a folder for this if it becomes too big and I have to split it in multiple files)