Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
kciter opened this issue Jan 18, 2017 · 19 comments
Open

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

kciter opened this issue Jan 18, 2017 · 19 comments

Comments

@kciter
Copy link
Member

kciter commented Jan 18, 2017

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
Copy link
Member

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

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

@ChangJoo-Park
Copy link
Member

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

@kciter
Copy link
Member Author

kciter commented Jan 18, 2017

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

@ChangJoo-Park
Copy link
Member

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

@kciter
Copy link
Member Author

kciter commented Jan 18, 2017

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

@ChangJoo-Park
Copy link
Member

네 맞아요

@kciter
Copy link
Member Author

kciter commented Jan 18, 2017

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

@ChangJoo-Park
Copy link
Member

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

@ChangJoo-Park
Copy link
Member

@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
Copy link
Member Author

kciter commented Feb 8, 2017

@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가 아닌 다른 프레임워크를 쓴다면 srcdist를 각각 프레임워크에 맞춰서 웹팩 설정해주면 될 것 같아요.

@pablohpsilva
Copy link

@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
Copy link
Member Author

kciter commented Feb 8, 2017

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

@pablohpsilva
Copy link

@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.

@kciter
Copy link
Member Author

kciter commented Feb 8, 2017

@pablohpsilva
Thank you. I will read it. :)
And I will translate it.

@ChangJoo-Park
Copy link
Member

@kciter 번역해주시는건가요? 오..

@kciter
Copy link
Member Author

kciter commented Feb 8, 2017

@ChangJoo-Park 이번에 프로젝트 진행하면서 전부는 아니더라도 이 가이드 문서를 기반으로 작업해보려구요 :)

@kangsLee
Copy link

kangsLee commented Mar 3, 2017

개인적으로 nuxt starter 디렉토리 구조가 마음에 드네요!

@nerdrun
Copy link

nerdrun commented Sep 22, 2018

@kciter 초기에 폴더 구조 잡는데에 많은 도움이 되었습니다. 감사합니다!

@kciter
Copy link
Member Author

kciter commented Sep 27, 2018

@nerdrun 감사합니다 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants