일본어 문서

오늘 발매 충분히 준비했어요.참으로 기쁘고 축하할 만하다.
Vue.js 자체는 0.12 이후 1.0을 발표합니다.0.11부터 API가 획기적으로 변경됐기 때문에 앞으로 안정화를 위해 노력하겠다고 생각한다.
Vue.js의 약점으로'viewModel이 커져서 큰 구조의 응용 프로그램을 어떻게 만드는지 모르겠다'는 것이 자주 열거된다.홍보만 해도 별거 아냐, 이번엔 베.js의 샘플로 최대 규모vue-hackernews의 코드를 읽고 싶습니다.
그 전에 HackerNews Clone에서 자주 사용하는 "Vueify"동작을 간략하게 설명합니다.

어셈블리화(Vueify 사용)

Vueify는 Vue입니다.js의 구성 요소 형식에 사용됩니다.vue 형식을 컴파일하는 브라우저 ify 플러그인입니다.자세한 내용은 Vue.js로 popup component 만들기를 참조하십시오.
대략적인 구조는 다음과 같다.template(HTML의 단편)와script,style를 연결할 뿐이다.

vu 파일을 Require 후browserify + vueify를 통과합니다. 아래 그림과 같이 bundle입니다.js에 삽입합니다.

이렇게 하면 ViewModel을 작은 부품으로 나누어 관리할 수 있다.마지막으로 Broserify로 파일을 컴파일하는 느낌.
또 웹팩도 같은 일을 할 수 있다.vue-loader를 사용하십시오.

HackerNews Clone의 구성

DEMO
SOURCE
그렇다면 Hacker News Clone의 구조를 실제로 설명해 드리겠습니다.

경로

먼저, index.그중에 앱.불러오다app.vue내.view구역에 뉴스 일람화면, 상세화면, 사용자정보화면이 있어 공유기를 통해 전환할 수 있다.

공유기가 하는 일은 보기 이름을 {view}에 대입하는 것입니다.{view}을 수정한 후 대응하는 보기로 전환합니다.

ViewModel과 Model의 협력

※ 정확한 M, VM에 해당하는지에 대해서는 자신이 없습니다.잘못했으면 용서해 주세요..
HackerNews Clone의 백엔드는 Firebase를 활용합니다.잡다한 항목으로 만들면'ViewModel에서 Firebase에서 데이터를 얻는다'는 논리를 직접 쓰면 ViewModel이 점점 뚱뚱해진다.
HackerNews Clone에서 store 를 선택합니다.Firebase 동작을 js라는 모델에 집중해서 ViewModel에서 호출합니다.
ViewModel에서 모델을 참조하려면 require를 사용하십시오.
store.js 내에서 Emitter를 만들고 방법을 만드는 것을 export합니다.이용하는 쪽에서 리퀘스트로 해.

ViewModel에서fetch를 실행할 때 Model만 호출됩니다.

또 모델을EventeEmitter로 설정하면 모델로부터 View모델쪽으로 이벤트 알림을 할 수 있다.

이렇게 하면 라이브 모델이 업데이트되더라도 ViewModel을 이벤트 드라이버로 업데이트할 수 있습니다.

끝말

여기까지 원본 코드를 읽고 구조를 보여 봤습니다.만약 잘못된 곳이 있으면 반드시 메시지를 남겨 주세요.
대규모 개발에서 어디까지 할 것인가.js공용이 잘 어울린다는 점에 대해 저는 자신이 없는 부분이라고 생각합니다. 그래서 저는 Vue에서 이렇게 하거나 React+flex가 좋다고 생각합니다. 꼭 댓글을 달아주세요.