이 기사는 Vue입니다.Js Advent Calender 2015 첫날 보도입니다.
여러분, VueServer.js라고 아세요?
이 기사에서 VueServer는가벼운 느낌으로 js를 소개하고 싶어요.그리고 마지막으로 익스프레스에 가세한 시위에 대해 말씀드리고 싶습니다.

VueServer.js와 함께?

이름 그대로.이것은 서버에서 js를 조작할 수 있는 오픈 소스 라이브러리입니다.
Vue.js는 React입니다.js의 Virutal DOM과 달리 DOM을 직접 이용하여 재현하기 때문에 서버 측면에서 동작을 해야 한다

VueServer.js: DOM 에뮬레이션 라이브러리

jsdom: 헤드 없는 브라우저

phantomjs: Pre-rendering & 캐시 서비스

잠깐만요.VueServer.js의 등장으로 서버에서 Vue가 나타났습니다.js 렌더링 후보가 될 수도 있어요.

누가 만들었어요?

VueServer.러시아Prerender.io에서 제공하는 서비스는 서버 쪽에서도 Vue입니다.js로 만든 구성 요소를 보여주고 SEO에 대응하기 위해 개발한 것 같습니다.이를 위해, Vue.Js가 공식적으로 지원하는 라이브러리가 아니라 제3자가 처리하는 라이브러리입니다.잠시 후 사용 시 몇 가지 제한 사항이 있으니 주의해야 합니다.

hello world

설명만 하는 것은 재미없다. 우선, 실제로는 Vue Server이다.js를 설치하고 Hello World의 플로피를 이동해서 무엇인지 보십시오:)

설치하다.

다음 설명은 사전 노드입니다.js가 필요하기 때문에 미리 설치하세요.(Node.js 버전이지만 자신의 환경에서 v5.1.0으로 확인되며 그렇게 오래된 버전이 아니면 움직일 수 있습니다.)
이번 VueServerjs의 적당한 작업 디렉터리npm init 등에서 준비pakcage.json를 시도하고 이 디렉터리에서 다음npm 명령으로 VueServer를 사용합니다.js를 설치합니다.

$ npm install vue-server --save-dev

코드 준비

그리고 상기 설치에 문제가 없으면 js 파일을 만들어 다음 코드를 저장합니다.
다음 코드는 Giithub의 Vue Server입니다.js 창고 README.mdNGS.RU(N1.RU)의 코드 부분을 수정한 코드입니다.

var vueServer = require('vue-server') // 1. VueServer.js を require
var Vue = new vueServer.renderer() // 2. Vue レンダラ を取得

// 3. Vue インスタンスを生成
var vm = new Vue({
  template: '<my-component></my-component>',
  components: {
    myComponent: {
      template: '<div>hello world</div>'
    }
  }
})

// 4. `vueServer.htmlReady` イベント経由でレンダリングされた HTML を取得
vm.$on('vueServer.htmlReady', function (html) {
  console.log(html)
})

이동 코드

node 명령을 사용하여 저장된 위 코드의 파일 이름을 지정하여 실행합니다.여기에 파일hello-world.js에 저장된 파일을 지정하고 실행합니다.

$ node hello-world.js
<div>hello world</div>

너의 단말기는 위에서 말한 대로 출력되었을 것이다. <div>hello world</div>

이 Hello World 코드의 점입니다.

상기 Hello World 코드는 무엇을 하고 있는지 댓글을 읽으면 알 수 있기 때문에 상세한 설명은 하지 않겠습니다. Vue Server.js의 특징 코드를 설명합니다.

Vue.프로그래밍 가능 인터페이스

이 기사를 본 사람은 베입니다.대부분의 사람들이 js를 접촉한 것 같아서 상술한 코드3.의 평론 코드를 아셔야 한다고 생각합니다.

// 3. Vue インスタンスを生成
var vm = new Vue({
  template: '<my-component></my-component>',
  components: {
    myComponent: {
      template: '<div>hello world</div>'
    }
  }
})

이 코드는 서버 쪽에서도 클라이언트 브라우저에서 실행됩니다.js와 같은 인터페이스를 지정한 것을 주의하십시오.
VueServer.js에 있는 기존 Vue입니다.js의 구성 요소를 직접 사용할 수 있습니다.(단, Vue.js의 문서에 따라 구성 요소를 만들면 됩니다.)즉, module.exports = { ... }의 컴포넌트require를 직접 지정할 수 있습니다.
또한 상기 코드의 2.에서 설명한 코드,

var Vue = new vueServer.renderer() // 2. Vue レンダラ を取得

여기, 우리는 Vuerendara를 Vue라는 변수에 저장합니다, Vue Server.js의 실현을 보면 사실상'클라이언트와 같은 동작을 만드는 위함수'라는 것을 알 수 있다.따라서 이러한 변수 이름, Vue를 사용합니다.js 사용자가 예전과 같이 서버 측에 있어도 같은 느낌으로 클라이언트 측을 이용하여 변수 이름이 될 수 있다는 점은 믿음직스럽다.

이벤트 통과 결과 렌더링

렌더링 결과를 수령하는 방법은 아래 코드를 참조하십시오

// 4. `vueServer.htmlReady` イベント経由でレンダリングされた HTML を取得
vm.$on('vueServer.htmlReady', function (html) {
  console.log(html)
})

Vue.js의 이벤트 API와 같이 $on vueServer.htmlReady 이벤트에서 호출을 통해 나타나는 HTML을 수신합니다.
예?어디 아파요?응, Vue.js를 사용하는 사용자에게 나는 이런 인터페이스를 통해서만 받아들일 수 있다고 생각한다.원래js는 기본적으로 모든 구성 요소의 문서 세션으로 관리되고 구성 요소의 조합을 통해 DOM에 삽입되거나 삭제되기 때문입니다.

Hello World의 총결산

지금까지 VueServer였습니다.js의 특징적인 인코딩입니다.거의, Vue.js와 같은 인터페이스의 API 동작을 사용하고 서버 측도 Vue를 사용합니다.너는 코드를 이동하면서 js를 렌더링할 수 있다는 것을 이해할 수 있니?
VueServer.js의 서버측 Vue를 사용했습니다.js의 과장은 좀 징그럽지만 이 Hello World의 코드 구조는 실제'형'으로 바뀌었고 그 다음은 Vue이다.js와 같은 API를 쓰는 것 같아서 사용하기가 어렵지 않아요.

Vue.js와의 호환성

처음 부분도 살짝 접촉했어, Vue Server.js 개발의 배경으로 Vue.js가 구축한 프로그램을 정적 HTML로 표현하기 위해 설계되었습니다.그러므로

사용자 상호 작용을 통한 능동적인 데이터 변경

Vue.jos의 hook(created, ready 등)은 Vue Server입니다.js에서 다르거나(createdBe,readyBe 등) 없거나

Vue.js의 방법, 디렉터리 등 몇 가지 기능을 이용할 수 없음(주로 DOM에 의존함)

몇 가지 제한이 있다.이렇게 하려면 VueServer가 필요합니다.js를 사용할 때 확인하는 것이 좋습니다.
이러한 규제에 대한 자세한 내용은 향후 버전 업그레이드에 따라 달라질 수 있기 때문에 이 글에는 기재되지 않았으며, 앞으로 사용을 고려하는 사람은 이쪽Getting Started을 참조하면 된다.특히 훅에서는 어떤 과장이 있으면 주의해야 한다.
그리고,Vue.js버전과 호환성이 있기 때문에 확인Restrictions을 잊지 마세요.

VueServer.js의 examples

Giithub에 있는 버전 테이블.
이번 Hello World를 제외하고 리스트를 처리하는 Mixin의, Vue Server를 이용합니다.js의 사전 컴파일 (pre-comple) 등 example이 있습니다.

VueServer.js의 공연

VueServer.나는 누군가가 js의 공연에 신경을 쓸 것 같아서 먼저 참고 링크를 올린다.

여기.

Rendering is fit for more:Vue.js vs React

Express 가져오기

이번 특집 기사를 쓸 때, Vue Server.js를 넣고 익스프레스의 시범적인 것을 만들었습니다.

Presentation by Andrey #337

VueServer.js express demo example
관심 있는 사람은 코드를 만지거나 읽어 보세요.

총결산

Vue.서버에서 js의 프로그램 라이브러리, VueServer를 이동하고 표시할 수 있습니다.js를 소개했습니다.
VueServer.js, Vue를 이용합니다.js로 작성된 인터페이스는 클라이언트 측에서 쉽게
Vue.js에서 재현된 DOM의 내용을 문자열의 HTML로 재현할 수 있습니다.
다만, VueServer.js는 Vue입니다.js의 실현을 참고하여,Vue.자신의 실현이 있거나 DOM에 의존하지 않기 때문에 약간의 Vue가 있다.js의 API와 디렉터리 등 기능에 제한이 있습니다.
따라서 이 점을 주의하면서 서버에서 사용하면서 고객과 같은 행동을 보여야 한다.

마지막 (핑계)

VueServer.각양각색의 js를 시도하는 과정에서 각양각색의 영감이 쏟아져 나왔다.jsdom와phantomjs를 사용하지 않아도 서버 측에서 동작하기 때문에 Vue입니다.하지만 VueServer는제이스 자체가 블루야.hackjs의 동작은 대수리적으로 접근력을 실현하지만 핵심 핵심도 isomorphic/universal과 같다.
원래 Vue Server였는데js+vue-router+vueify의 조합으로 isomorphic/universal 기사를 쓰려고 했지만 다양한 yakshaving을 해야 하기 때문에 포기했습니다.시간이 있을 때도 이따가 도전해 보고 싶어요.