vueport

พอร์ต

ส่วนประกอบไฟล์เดียวและ SSR สำหรับ Rails ด้วย Vue JS และ WebPack

อัญมณีนี้ไม่ได้รับการดูแลอย่างแข็งขัน! ยังคงไม่มีทางออกที่ดีสำหรับการใช้งาน SSR สำหรับ Vue (เช่น React_on_Rails สำหรับ React)

ถ้าฉันจะสร้างอัญมณีนี้อีกครั้งฉันอาจจะใช้บางอย่างเช่น mini_racer เพื่อแสดงส่วนประกอบ Vue บนเซิร์ฟเวอร์เดียวกันเมื่อเทียบกับการแนะนำคำขอ HTTP และค่าใช้จ่าย Infra หากใครยังคงใช้อัญมณีนี้และต้องการทำงานนั้นก็ควรจะค่อนข้างตรงไปตรงมาโดยการปรับเปลี่ยนคลาส Renderer

VuePort ให้แอป Rails ของคุณด้วยวิธีการที่ทันสมัยและเป็นส่วนประกอบในการพัฒนา UI โดยใช้ webpack และ vue.js เพื่อเปิดใช้งานไฟล์เดียวส่วนประกอบปฏิกิริยาที่แสดงบนเซิร์ฟเวอร์และไคลเอนต์และการรวมเข้าด้วยกันอย่างไร้รอยต่อกับมุมมองรางของคุณ

ดูเอกสาร Vue.js ในส่วนประกอบไฟล์เดียวสำหรับข้อมูลเพิ่มเติมเกี่ยวกับสิ่งต่าง ๆ

Vueport Piggybacks ไปยัง Webpackrails Gem เพื่อรับการตั้งค่า webpack ด้วยรางดังนั้นตรวจสอบข้อมูลเพิ่มเติม

แอปตัวอย่าง Rails

ที่นี่.

การติดตั้ง

เพิ่มบรรทัดนี้ใน Gemfile ของแอปพลิเคชันของคุณ:

 gem 'vueport'

แล้วดำเนินการ:

 $ bundle

หรือติดตั้งด้วยตัวเองเป็น:

 $ gem install vueport

จากนั้นเพียงแค่วิ่ง

rails generate vueport:install

ในการ bootstrap ทุกสิ่งที่คุณต้องเริ่มต้น (จะติดตั้ง 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 Helper เพื่อแสดงส่วนประกอบของคุณ เช่นใน application.html.erb ของคุณ html.erb:

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

นอกจากนี้ยังสามารถยอมรับอาร์กิวเมนต์เดียว เช่น:

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

การตั้งค่าสินทรัพย์

เพิ่มผู้ช่วย Webpack Rails ลงในเค้าโครงของคุณเพื่อรวม JavaScript และ CSS ของคุณ (ดู WebPackrails ReadMe สำหรับข้อมูลเพิ่มเติม)

ให้แน่ใจว่าคุณวางจุดเข้า JS หลังจากผู้ช่วย VuePort!

เช่น:

 < 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 หากต้องการเปลี่ยนสิ่งเหล่านี้คุณจะต้องเปลี่ยนทั้ง 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 แอปพลิเคชัน:

• แอปฐานของคุณ
• แอพโหนดสำหรับการแสดงผลด้านเซิร์ฟเวอร์ในการผลิต (ใน /renderer)
• แอพโหนดสำหรับเรียกใช้ webpack ในการพัฒนา

สิ่งเหล่านี้ได้รับการตั้งค่าเพื่อให้พวกเขาสามารถสร้างขึ้นเพื่อการผลิตแยกต่างหากเพื่อหลีกเลี่ยงท่อที่ซับซ้อน - ตัวอย่างเช่นคุณสามารถเรียกใช้แอปพลิเคชันทั้ง 3 นี้โดยใช้ Docker แยกกันอย่างสมบูรณ์ซึ่งหมายความว่าคุณไม่ต้องการทับทิมและโหนดใน Dockerfile เดียว

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการรวม WebPack เข้ากับ Rails ลองดูส่วนนี้ของ Webpack Rails ReadMe

การแสดงผลด้านเซิร์ฟเวอร์ (SSR)

ในการเปิดใช้งานการแสดงผลด้านเซิร์ฟเวอร์ฉันได้สร้างแอพ NodeJS อย่างง่ายซึ่งใช้ Vue Server Renderer เพื่อแสดงเนื้อหาของหน้าเว็บในแต่ละคำขอ เพื่อเปิดใช้งานการคืนสภาพของลูกค้าเรายังแนบเนื้อหามุมมองดั้งเดิมในเทมเพลตสำหรับอินสแตนซ์ Vue ด้านไคลเอนต์เพื่อรับ

SSR เปิดใช้งานเฉพาะในการผลิต

ทำไม vue.js?

ประสบการณ์ของฉันในการทำงานกับห้องสมุด UI ที่ทันสมัยหลายแห่งและโดยเฉพาะอย่างยิ่งกับการรวมเข้ากับแอพ Rails (โดยเฉพาะอย่างยิ่ง React และ Vue JS) ได้นำฉันไปสู่ข้อสรุปว่า Vue JS ดูเหมือนจะเป็นการอธิบายเพิ่มเติมและ 'แบตเตอรี่รวม'

ฉันใช้ React เป็นประจำสำหรับสปาและรักปรัชญาการทำงานของมัน แต่สำหรับการเขียนส่วนประกอบเพื่อให้พอดีกับส่วนหน้ารถไฟ Vue ดูเหมือนจะให้ความซับซ้อนน้อยที่สุดแก่ฉันและดูเหมือนจะง่ายที่สุดสำหรับนักพัฒนาทับทิมที่ให้เหตุผลเกี่ยวกับ

สำหรับ vue.js และตอบสนองการเปรียบเทียบการทำงานร่วมกันให้ตรวจสอบสิ่งนี้

คำถามที่พบบ่อย

• ฉันได้รับข้อผิดพลาด Could not load compiled manifest from /app/public/webpack/manifest.json ในการผลิต

  คุณจะต้องเรียกใช้ npm run compile เป็นส่วนหนึ่งของกระบวนการสร้างของคุณเพื่อสร้างชุด JS ที่ผลิต (ข้อผิดพลาดนี้สร้างขึ้นโดย WebPackrails)

สิ่งที่ต้องทำ

• จัดการ SSR
• ทำให้การกำหนดค่า webpack มากขึ้นเหมือนการกำหนดค่าจากเทมเพลต Vue CLI
• เพิ่มประสิทธิภาพการโต้ตอบ SSR ด้วย nodejs
• การตั้งค่าการทดสอบองค์ประกอบ JS

การพัฒนา

หลังจากตรวจสอบ repo ให้เรียกใช้ bin/setup เพื่อติดตั้งการพึ่งพา จากนั้นเรียกใช้ rake spec เพื่อเรียกใช้การทดสอบ นอกจากนี้คุณยังสามารถเรียกใช้ bin/console สำหรับพรอมต์แบบโต้ตอบที่จะช่วยให้คุณสามารถทดลองได้

ในการติดตั้งอัญมณีนี้ลงบนเครื่องในเครื่องของคุณให้เรียกใช้ bundle exec rake install หากต้องการเปิดตัวเวอร์ชันใหม่ให้อัปเดตหมายเลขเวอร์ชันใน version.rb จากนั้นเรียกใช้ bundle exec rake release ซึ่งจะสร้างแท็ก GIT สำหรับเวอร์ชันกด GIT และแท็กและกดไฟล์ .gem ไปที่ rubygems.org

การบริจาค

รายงานข้อผิดพลาดและคำขอดึงยินดีต้อนรับบน GitHub ที่ https://github.com/samtgarson/vueport โครงการนี้มีจุดประสงค์เพื่อเป็นพื้นที่ที่ปลอดภัยและเป็นมิตรสำหรับการทำงานร่วมกันและผู้สนับสนุนคาดว่าจะปฏิบัติตามจรรยาบรรณของผู้สนับสนุน

ขอบคุณ

• ขอบคุณมากสำหรับ Evan คุณและทีม Vuejs ที่สนับสนุนชุมชนที่มีชีวิตชีวาและให้การสนับสนุนรอบ ๆ Vue JS
• ขอบคุณมากสำหรับ Mipearson สำหรับอัญมณี Webpackrails ของเขาซึ่งอัญมณีนี้ต้องอาศัย

ใบอนุญาต

อัญมณีมีให้เป็นโอเพ่นซอร์สภายใต้ข้อกำหนดของใบอนุญาต MIT