Vue.js 개발에 적합한 디렉토리 구조

[kciter]

Vue.js 개발에 적합한 디렉토리 구조는 어떻게 잡아야할까요?
저도 아직 잘 모르겠지만 이 부분에 대해서 명확한 설명이 있다면 좋을 것 같습니다. 특히 처음 js 프레임워크/라이브러리를 접하시는 분들은 이 부분에 대해서 고민을 많이 하시더라구요.
아래 링크는 리엑트의 디렉토리 구조에 대해서 설명한 링크입니다.

https://gist.github.com/ryanflorence/daafb1e3cb8ad740b346
http://marmelab.com/blog/2015/12/17/react-directory-structure.html
https://reactjsnews.com/structuring-react-projects

[ChangJoo-Park]

좋은 의견 감사합니다 고민해봐야할 문제긴 하네요
저는 vue-cli 에서 webpack 템플릿이 좋은 예라고 생각해요

http://vuejs-templates.github.io/webpack/structure.html

[ChangJoo-Park]

자유로워서 장점이긴한데 이게 단점일 수도 있겠네요

[kciter]

node 환경이 아닌 다른 언어 환경일 경우도 생각해보면 좋을 것 같아요 :)

[ChangJoo-Park]

@kciter 작업하실때 백엔드 프론트엔드 구분에서 프로젝트 나누어 놓으시죠?

[kciter]

@ChangJoo-Park 프로젝트를 나눈다는 것이 레포를 나눈다는 뜻인가요? :)

[ChangJoo-Park]

네 맞아요

[kciter]

API 백엔드 서버를 따로두고 웹페이지를 보여줄 서버에는 백엔드와 프론트엔드 같이 사용하고 있어요 ㅎㅎ

[ChangJoo-Park]

아 그렇군요 이부분은 정말 케이스 바이 케이스 일거같아요 답변 고맙습니다

[ChangJoo-Park]

@kciter
“Vue.js 2 + Vuex + Router + yarn! Basic Configuration version 2” @pablohpsilva https://medium.com/tldr-tech/vue-js-2-vuex-router-yarn-basic-configuration-version-2-7b9c489d43b3

이 글에서 디렉터리 구조 한번 봐주실 수 있을까요?

[kciter]

@ChangJoo-Park 지금까지 본 구조 중에서 가장 좋네요! 좀 더 확장시켜보면

src   
├── App.vue 
├── assets
|   ├── css
|   |   └── main.css
|   ├── font 
|   └── img 
├── commons
|   ├── directives 
|   ├── functions 
|   ├── resources
|   └── validations
├── config 
|   ├── directives.js
|   ├── router.js
|   └── validations.js
├── shared-components 
|   ├── RangeCustom.vue 
|   ├── Sidebar.vue 
|   └── Toolbar.vue 
├── spa 
|   ├── Login 
|   |   ├── components
|   |   └── Login.vue
|   ├── Products 
|   |   ├── components
|   |   └── Products.vue
|   ├── components
|   ├── Home.vue 
|   └── NotFound.vue 
├── vuex 
|   ├── modules 
|   └── store.js 
└── main.js

spa의 각 페이지마다 components 디렉토리가 있으면 되겠네요. :)
Node가 아닌 다른 프레임워크를 쓴다면 src와 dist를 각각 프레임워크에 맞춰서 웹팩 설정해주면 될 것 같아요.

[pablohpsilva]

@kciter
I can't really speak nor write Korean, but thanks for sharing my article. I'm open to upgrades.
I'm glade you liked it.

[kciter]

@pablohpsilva
Thank you for your awesome post! It has helped me a lot.

[pablohpsilva]

@kciter
I've also written an article/repo entitled "Vue.js Component Style Guide"

I would love to have you and your country community help to write it.
The medium article is right here.