良い...チャット開発の例を使用して、Vue.js v2とRuby on Railsを統合した経験をコミュニティと共有することにしました。 これを行うには、Railsのwebsocket-ActionCableの実装が必要です。
これはいくつかの記事の最初の部分であり、たくさんのことを積み重ねず、開発への段階的なアプローチを取りません。 このパートでは、基本的に既存の記事を繰り返します。リンク先は以下のとおりですが、開発プロセス全体を段階的に追う必要があります。 興味のある方へ-猫の下。
バックエンドの準備
gemをインストールします。
gem install webpacker
新しいアプリケーションを作成します。
rails new chat --webpack=vue
gem Foremanを追加して、1つのコマンドで前面と背面を起動します。
gem 'foreman'
そしてそれをインストールします：
bundle update
プロジェクトのルートに次の内容のProcfileを作成します。
#Procfile backend: bin/rails s -p 3000 frontend: bin/webpack-dev-server
リソースを作成します。
rails g resource Message body:text username:string
コントローラーにメソッドを追加します。
# app/controllers/messages_controller.rb class MessagesController < ApplicationController def index end def create end end
root_pathを定義します。
#config/routes.rb: Rails.application.routes.draw do resources :messages root to: 'messages#index' end
app / views / messagesフォルダーに空の index.html ファイルを作成します
バックエンドの準備作業が完了しました。フロントエンドを準備する必要があります。
フロントエンドを準備する
プロジェクトにwebpacker gemをインストールすると、フロントエンドが存在する新しいapp / javascriptディレクトリが現れました。 既存のフロントエンドアーキテクチャを少し変更します。 これを行うには、ディレクトリapp / javascript / packs / componentを作成し、ファイルapp.vueをその中に配置します
そのようなコンテンツ：
<template> <div id="app"> <p>{{ message }}</p> </div> </template> <script> export default { data: function () { return { message: "Hello Vue!" } } } </script> <style scoped> p { font-size: 2em; text-align: center; } </style>
app / javascript / packs / application.jsファイルの内容を次のように置き換えます。
import Vue from 'vue' import App from './components/app.vue' document.addEventListener('DOMContentLoaded', () => { const el = document.body.appendChild(document.createElement('application')) const app = new Vue({ el, render: h => h(App) }) console.log(app) })
application.html.erbでは、jsおよびcss接続を置き換えます
<head> <title>Chat</title> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all' %> <%= stylesheet_pack_tag 'application', media: 'all' %> <%= javascript_pack_tag 'application' %> <!-- <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> --> </head>
最初の打ち上げ
bundle binstubs bundler --force foreman start
http：// localhost：3000のブラウザーに、Hello Vue！というページが表示されます。
これでプロジェクトの準備が完了し、チャットの開発に進むことができます。
GitHubコード。