vueport
v0.1.5
Komponen file tunggal dan SSR untuk rel dengan Vue JS dan Webpack
Jika saya membangun permata ini lagi, saya mungkin akan menggunakan sesuatu seperti mini_racer untuk membuat komponen VUE di server yang sama, sebagai lawan memperkenalkan permintaan HTTP dan infra overhead. Jika ada yang masih menggunakan permata ini dan ingin melakukan pekerjaan itu, itu harus relatif lurus ke depan dengan memodifikasi kelas renderer.
Vueport menyediakan aplikasi Rails Anda dengan pendekatan modern dan komponen untuk pengembangan UI dengan menggunakan Webpack dan Vue.js untuk mengaktifkan file tunggal, komponen reaktif yang diberikan pada server dan klien dan integrasi mulus dengan tampilan rel Anda.
Lihatlah dokumentasi Vue.js pada komponen file tunggal untuk informasi lebih lanjut tentang hal itu.
Piggyback Vueport ke permata webpackrails untuk mendapatkan pengaturan web dengan rel, jadi periksa untuk informasi lebih lanjut.
Di Sini.
Tambahkan baris ini ke gemfile aplikasi Anda:
gem 'vueport'Dan kemudian mengeksekusi:
$ bundle
Atau instal sendiri sebagai:
$ gem install vueport
Lalu jalankan saja
rails generate vueport:installUntuk bootstrap semua yang Anda butuhkan untuk memulai (ini akan menginstal webpackrail dan juga semua yang dibutuhkan Vueport di atas).
Untuk menjalankan aplikasi Anda, jalankan
bundle exec foreman start -f Procfile.devUntuk mem -boot server Webpack Dev dan aplikasi Rails Anda!
Pastikan untuk menjalankan npm run compile (atau yarn run compile ) sebagai bagian dari proses penyebaran Anda untuk produksi. Ini mengkompilasi versi produksi bundel sisi klien Anda, serta menyusun bundel sisi server untuk digunakan oleh aplikasi Node JS Node kami.
Dalam produksi kami mengirim permintaan HTTP ke server NodeJS dasar untuk membuat konten kami. Untuk menjalankan aplikasi Rails dan server node secara bersamaan, gunakan Procfile .
Bungkus aplikasi Anda di Helper vueport , untuk membuat komponen Anda. Misalnya di application.html.erb Anda.html.erb:
< body >
<%= vueport do %>
<%= render partial : 'shared/nav' %>
<%= yield %>
<% end %>
</ body >Itu juga dapat menerima satu argumen. Misalnya:
< body >
<%= vueport yield %>
</ body >Tambahkan pembantu Webpack Rails ke tata letak Anda untuk memasukkan JavaScript dan CSS Anda (lihat readme webpackrails untuk informasi lebih lanjut).
Pastikan Anda menempatkan titik masuk JS setelah pembantu Vueport!
Misalnya:
< 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 >Di luar kotak, Vueport mengharapkan komponen Anda untuk hidup dalam aplikasi/komponen , dan menyusun aset ke public/webpack . Untuk mengubah ini, Anda harus mengubah kedua konfigurasi webpack (di config/webpack.config.js dan config/webpack.server.js ) dan konfigurasi aplikasi Vue Gem. Untuk melakukan ini, dalam inisialisasi lakukan:
Vueport . configure do | config |
config [ :server_port ] = 3001
endLihat permata webpackrails untuk informasi tentang konfigurasinya.
Apa yang diberikan Vueport kepada Anda adalah 3 aplikasi secara efektif:
Ini telah diatur sehingga dapat dibangun untuk produksi sepenuhnya secara terpisah untuk menghindari jaringan pipa yang rumit - misalnya, Anda dapat menjalankan 3 aplikasi ini menggunakan Docker sepenuhnya secara terpisah yang berarti Anda tidak memerlukan ruby dan node dalam satu dockerfile.
Untuk informasi lebih lanjut tentang bagaimana Webpack telah diintegrasikan dengan Rails, lihat bagian ini dari README RAILS WEB ini.
Untuk mengaktifkan rendering sisi server, saya membuat aplikasi NodeJS sederhana yang menggunakan renderer Vue Server untuk membuat konten halaman pada setiap permintaan. Untuk mengaktifkan rehidrasi sisi klien, kami juga melampirkan konten tampilan asli dalam template untuk diambil instance sisi klien VUE.
SSR hanya diaktifkan dalam produksi.
Pengalaman saya bekerja dengan banyak perpustakaan UI modern, dan khususnya dengan mengintegrasikannya dengan aplikasi Rails (terutama React dan Vue JS), telah membawa saya ke kesimpulan bahwa Vue JS tampaknya menjadi lebih banyak penjelasan dan baterai 'termasuk' perpustakaan ketika membangun kompon untuk rel.
Saya menggunakan React secara teratur untuk spa dan menyukai filosofi fungsionalnya, tetapi untuk menulis komponen agar sesuai dengan frontend rel, Vue tampaknya memberi saya kompleksitas paling sedikit, dan tampaknya paling mudah bagi pengembang Ruby untuk bernalar.
Untuk perbandingan vue.js dan bereaksi kolaboratif, lihat ini.
Saya mendapatkan kesalahan Could not load compiled manifest from /app/public/webpack/manifest.json dalam produksi
Anda harus menjalankan npm run compile sebagai bagian dari proses build Anda untuk menghasilkan bundel JS produksi (kesalahan ini dihasilkan oleh webpackrails)
Setelah memeriksa repo, jalankan bin/setup untuk menginstal dependensi. Kemudian, jalankan rake spec untuk menjalankan tes. Anda juga dapat menjalankan bin/console untuk prompt interaktif yang akan memungkinkan Anda untuk bereksperimen.
Untuk menginstal permata ini ke mesin lokal Anda, jalankan bundle exec rake install . Untuk merilis versi baru, perbarui nomor versi di version.rb , dan kemudian jalankan bundle exec rake release , yang akan membuat tag git untuk versi, Push Git Commits and Tag, dan tekan file .gem ke rubygems.org.
Laporan bug dan permintaan tarik dipersilakan di GitHub di https://github.com/samtgarson/vueport. Proyek ini dimaksudkan untuk menjadi ruang yang aman dan ramah untuk kolaborasi, dan kontributor diharapkan mematuhi Kode Perilaku Perjanjian Kontributor.
Permata tersedia sebagai open source di bawah ketentuan lisensi MIT.
