Vue js 프로젝트 구조 잡기

sparcs-kaist / sparcs09

SPARCS 공동구매 시스템 https://09.sparcs.org/

MIT License

2 stars 2 forks source link

Vue js 프로젝트 구조 잡기 #34

Closed ktk1012 closed 7 years ago

ktk1012 commented 7 years ago

vue.js 각 요소들에 대한 project 구조 작성
- component
- pages, routing
- store (vuex)
- common modules (session handling)
- 환경에 따른 설정 관리 (dev, producting에서 가르키는 api 서버 주소 관리 등)
component 및 page 작성해 보면서 wiki에 가이드 문서 작성

ktk1012 commented 7 years ago

component와 page를 분리하자. (inspired from nuxt.js)

component: ui에서 공통적으로 사용될 요소(navbar, item, ...). 해당 컴포넌트는 단순히 ui만 그려주는 역할. react에서 말하는 presentational component
page: component를 조합하여 페이지를 그림, data fetching (혹은 store에서 mutation comit, action dispatch). 실제 route는 각 page들에 대한 url매핑으로 볼 수 있다.

ktk1012 commented 7 years ago

클라이언트 설정은 https://webpack.js.org/plugins/define-plugin/ 을 참고해서 따라 가면 될듯. (현재 프로젝트에서는 config 폴더에 config.prod.js, config.dev.js 두 개 있고 dev가 prod 설정 덮어쓰므로 overriding은 dev에서 합니다.) 주의할 점은 vue component 혹은 page 의 vue template에 webpack plugin을 호출하는 실수를 범하면 안된다.. 만약 쓰고 싶으면 Githubissues.

Githubissues is a development platform for aggregating issues.