vueport 다운로드 vueport 소스 코드 다운로드

vueport

타사 구성 요소

v0.1.5

다운로드

vueport

VUE JS 및 웹 팩이있는 레일 용 단일 파일 구성 요소 및 SSR

켈 이 보석은 적극적으로 유지되지 않습니다! VUE 용 SSR을 실행하기위한 좋은 솔루션은 여전히없는 것 같습니다 (React_on_Rails는 REACT를 제공합니다).

이 보석을 다시 만들려면 HTTP 요청 및 Infra 오버 헤드를 도입하는 것과는 대조적으로 Mini_Racer와 같은 것을 사용하여 동일한 서버에서 VUE 구성 요소를 렌더링 할 것입니다. 누군가가 여전히이 보석을 사용하고 그 일을하고 싶다면 렌더러 클래스를 수정하여 비교적 간단해야합니다.

VuePort는 WebPack 및 Vue.js를 사용하여 Server 및 클라이언트에서 렌더링 된 반응 형 구성 요소 및 Rails보기와의 원활한 통합을 활성화하여 UI 개발에 대한 최신 구성 요소화 된 접근 방식을 Rails 앱에 제공합니다.

해당 측면에 대한 자세한 내용은 단일 파일 구성 요소의 vue.js 문서를 살펴보십시오.

WebpackRails 보석에 돼지를 vueport로 만들려면 레일을 사용하여 웹 팩을 설정하므로 자세한 내용을 확인하십시오.

예제 레일 앱

여기.

설치

이 라인을 응용 프로그램의 보석에 추가하십시오.

 gem 'vueport'

그런 다음 실행 :

 $ bundle

또는 직접 설치하십시오.

 $ gem install vueport

그런 다음 그냥 실행하십시오

rails generate vueport:install

시작하는 데 필요한 모든 것을 부트 스트랩하기 위해 (이것은 WebPackRails와 VuePort가 필요로하는 모든 것을 설치합니다).

앱을 실행하려면 실행하십시오

bundle exec foreman start -f Procfile.dev

Webpack Dev Server 및 Rails 앱을 부팅하려면!

생산 배포

배포 프로세스의 일부로 생산에 대한 npm run compile (또는 yarn run compile )을 실행하십시오. 이는 클라이언트 사이드 번들의 프로덕션 버전을 컴파일 할뿐만 아니라 Node JS 앱의 서버 측 번들을 컴파일합니다.

제작에서 우리는 HTTP 요청을 기본 NodeJS 서버로 보냅니다. Rails 앱과 노드 서버를 동시에 실행하려면 Procfile 사용하십시오.

용법

도우미를보십시오

vueport 헬퍼에 응용 프로그램을 감고 구성 요소를 렌더링하십시오. eg application.html.erb :

 < body >
    <%= vueport do %>
        <%= render partial : 'shared/nav' %>
        <%= yield %>
    <% end %>
</ body >

또한 단일 주장을 받아 들일 수 있습니다. 예 : :

 < body >
    <%= vueport yield %>
</ body >

자산 설정

JavaScript 및 CSS를 포함하려면 WebPack Rails 도우미를 레이아웃에 추가하십시오 (자세한 내용은 WebPackRails ReadMe 참조).

vueport 헬퍼 다음에 JS EntryPoint를 배치하십시오!

예 : :

 < head >
    <%= stylesheet_link_tag * webpack_asset_paths ( 'application' , extension :  'css' ) %>
</ head >
< body >
    <%= vueport do %>
        <%= render partial : 'shared/nav' %>
        <%= yield %>
    <% end %>

    <%= javascript_include_tag * webpack_asset_paths ( "application" , extension : 'js' ) %>
</ body >

기본 구성

VuePort는 상자 밖에서 구성 요소가 앱/구성 요소 에 살기를 기대하고 자산을 공개/웹 팩 에 컴파일합니다. 이를 변경하려면 Webpack Config ( Config/webpack.config.js 및 config/webpack.server.js )와 vue gem 응용 프로그램 구성을 모두 변경해야합니다. 이를 위해, 이니셜 라이저에서 :

 Vueport . configure do | config |
    config [ :server_port ] = 3001
end

구성에 대한 정보는 WebPackRails Gem을 확인하십시오.

어떻게 작동합니까?

VuePort가 제공하는 것은 효과적으로 3 가지 응용 프로그램입니다.

기본 레일 앱
제작의 서버 측 렌더링을위한 노드 앱 (IN /Renderer)
개발중인 웹 팩을 실행하기위한 노드 앱

이들은 복잡한 파이프 라인을 피하기 위해 완전히 별도로 생산을 위해 구축 할 수 있도록 설정되었습니다. 예를 들어, Docker를 사용 하여이 3 응용 프로그램을 완전히 별도로 사용하여 단일 Dockerfile에서 Ruby와 Node가 필요하지 않음을 의미합니다.

Webpack이 Rails와 통합 된 방법에 대한 자세한 내용은 Webpack Rails Readme 의이 섹션을 확인하십시오.

서버 사이드 렌더링 (SSR)

서버 사이드 렌더링을 활성화하기 위해 VUE 서버 렌더러를 사용하여 각 요청에서 페이지의 내용을 렌더링하는 간단한 Nodejs 앱을 만들었습니다. 클라이언트 측 재수 화를 가능하게하기 위해 클라이언트 측 vue 인스턴스가 픽업 할 수 있도록 템플릿에 원래보기 내용을 첨부합니다.

SSR은 생산에서만 가능합니다.

왜 vue.js?

많은 최신 UI 라이브러리와의 작업에 대한 나의 경험과 레일 앱 (특히 React 및 Vue JS)과 통합된다. Vue JS는 레일에 대한 컴퓨터를 구축 할 때 더 자세한 표현 및 '배터리 포함'라이브러리가 포함 된 것으로 보인다는 결론으로 이어졌습니다.

나는 SPA에 정기적으로 React를 사용하고 기능 철학을 좋아하지만 Rails 프론트 엔드에 적합한 구성 요소를 작성하려면 Vue가 저에게 가장 복잡한 것을 제공하는 것처럼 보이며 Ruby 개발자가 가장 쉬운 것으로 보입니다.

vue.js 및 반응 공동 작업 비교의 경우이를 확인하십시오.

FAQ

오류가 제작에서 Could not load compiled manifest from /app/public/webpack/manifest.json
생산 JS 번들을 생성하려면 빌드 프로세스의 일부로 npm run compile 실행해야합니다 (이 오류는 WebPackRails에서 생성).

할 일

SSR 처리
Vue CLI 템플릿의 구성과 같은 웹 팩 구성을 더 많이 만듭니다.
nodejs와의 SSR 상호 작용을 최적화하십시오
JS 구성 요소 테스트 설정

개발

레포를 확인한 후 bin/setup 실행하여 종속성을 설치하십시오. 그런 다음 rake spec 실행하여 테스트를 실행하십시오. 실험 할 수있는 대화식 프롬프트를 위해 bin/console 실행할 수도 있습니다.

이 보석을 로컬 컴퓨터에 설치하려면 bundle exec rake install 실행하십시오. 새 버전을 해제하려면 version.rb 에서 버전 번호를 업데이트 한 다음 버전에 대한 GIT bundle exec rake release 를 생성하고 GIT 커밋 및 태그를 누르고 .gem 파일을 rubygems.org로 누릅니다.

기여

https://github.com/samtgarson/vueport (https://github.com/samtgarson/vueport)에서 버그 보고서 및 풀 요청을 환영합니다. 이 프로젝트는 협력을위한 안전하고 환영하는 공간이되기위한 것이며, 기고자들은 기고자 계약 규범을 준수 할 것으로 예상됩니다.