Cara membina aplikasi web berskala menggunakan Vue.js dan Ruby

Cara membina aplikasi web berskala menggunakan bahasa Vue.js dan Ruby

Dalam beberapa tahun kebelakangan ini, dengan pembangunan aplikasi web dan permintaan yang semakin meningkat, membina aplikasi web berskala telah menjadi topik penting. Sebagai rangka kerja bahagian hadapan JavaScript yang ringan, Vue.js menyediakan penyelesaian yang fleksibel, cekap dan berskala. Pada masa yang sama, Ruby, sebagai bahasa pengaturcaraan yang ringkas dan mudah dibaca, boleh digunakan untuk membina sistem back-end yang berkuasa. Artikel ini akan memperkenalkan cara menggabungkan bahasa Vue.js dan Ruby untuk membina aplikasi web berskala dan melampirkan contoh kod yang sepadan.

Pertama, kita perlu mencipta struktur projek asas. Dalam direktori akar projek, gunakan alat baris arahan Ruby (seperti Bundler) untuk mencipta aplikasi Ruby baharu dan pasang kebergantungan yang diperlukan:

bundle init

Kemudian, tambahkan Ruby yang diperlukan dalam Gemfile fail Perpustakaan dan rangka kerja seperti Ruby on Rails: Gemfile文件中添加必要的Ruby库和框架，例如Ruby on Rails：

gem 'rails'

运行以下命令安装依赖：

bundle install

接下来，我们需要创建一个简单的Ruby on Rails控制器和视图用于渲染我们的Vue.js应用。在控制台中执行以下命令：

rails generate controller Welcome index

然后，打开生成的app/controllers/welcome_controller.rb文件，并添加以下代码：

class WelcomeController < ApplicationController
  def index
  end
end

接着，创建一个名为index.html.erb的视图文件，路径为app/views/welcome，并添加以下代码：

<h1>Welcome#index</h1>
<div id="app"></div>

在根目录下的app/assets/javascripts文件夹中创建一个名为app.js的JavaScript文件，并添加以下内容：

import Vue from 'vue'
import App from './app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#app',
    render: h => h(App)
  }).$mount()
})

创建一个名为app.vue的Vue组件，路径为app/assets/javascripts，并添加以下代码：

<template>
  <div>
    <h2>{{ message }}</h2>
    <button @click="increment">{{ count }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js!',
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

此时，我们已经完成了基本的前后端集成设置。接下来，我们需要使用Webpack来构建和打包我们的Vue.js应用。首先，安装Webpack及相关依赖：

npm init -y
npm install --save-dev webpack webpack-cli vue-loader vue-template-compiler

然后，创建一个名为webpack.config.js的Webpack配置文件，并添加以下内容：

const path = require('path')

module.exports = {
  entry: './app/assets/javascripts/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public')
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        use: 'vue-loader'
      }
    ]
  }
}

接下来，我们需要修改app/views/welcome/index.html.erb文件，将之前的<div id="app"></div>片段替换为<div id="app"><%= javascript_pack_tag 'bundle' %></div>。

现在，我们可以运行Webpack来构建我们的Vue.js应用：

npx webpack --mode development

最后，我们需要启动Ruby on Rails服务器来查看和测试我们的Web应用：

rails server

在浏览器中打开http://localhost:3000rrreee

Jalankan arahan berikut untuk memasang dependensi:

rrreee

Seterusnya, kita perlu mencipta pengawal dan paparan Ruby on Rails yang mudah untuk memaparkan aplikasi Vue.js kami. Jalankan arahan berikut dalam konsol:

rrreee

Kemudian, buka fail app/controllers/welcome_controller.rb yang dihasilkan dan tambahkan kod berikut: 🎜rrreee🎜Seterusnya, buat fail bernama index . Fail lihat html.erb, laluannya ialah app/views/welcome dan tambahkan kod berikut: 🎜rrreee🎜app/assets/javascripts dalam direktori akar >Buat fail JavaScript bernama app.js dalam folder dan tambah kandungan berikut: 🎜rrreee🎜Buat komponen Vue bernama app.vue dengan laluan app/assets/javascripts dan tambahkan kod berikut: 🎜rrreee🎜Pada ketika ini, kami telah melengkapkan tetapan penyepaduan bahagian hadapan dan bahagian belakang asas. Seterusnya, kami perlu menggunakan Webpack untuk membina dan membungkus aplikasi Vue.js kami. Mula-mula, pasang Webpack dan kebergantungan yang berkaitan: 🎜rrreee🎜 Kemudian, buat fail konfigurasi Webpack bernama webpack.config.js dan tambah kandungan berikut: 🎜rrreee🎜Seterusnya, kita perlu mengubah suai app /views/welcome/index.html.erb fail, gantikan serpihan <div id="app"></div> sebelumnya dengan &lt ;div id ="app"><%= javascript_pack_tag 'bundle' %></div>. 🎜🎜Kini, kami boleh menjalankan Webpack untuk membina apl Vue.js kami: 🎜rrreee🎜Akhir sekali, kami perlu memulakan pelayan Ruby on Rails untuk melihat dan menguji apl web kami: 🎜rrreee🎜Buka http dalam penyemak imbas anda : //localhost:3000, anda akan melihat halaman alu-aluan dengan butang kaunter Vue.js. Apabila anda mengklik butang, nilai pembilang akan dinaikkan. 🎜🎜Melalui kaedah di atas, kami berjaya menggabungkan bahasa Vue.js dan Ruby untuk membina aplikasi web berskala. Vue.js menyediakan keupayaan pembangunan bahagian hadapan yang berkuasa, manakala bahasa Ruby menyediakan sokongan bahagian belakang yang fleksibel dan mudah digunakan. Dengan gabungan ini, kami dapat mencipta aplikasi web berprestasi tinggi dan berskala. 🎜🎜Di atas ialah langkah terperinci untuk membina aplikasi web berskala menggunakan bahasa Vue.js dan Ruby. Melalui penyepaduan bahagian hadapan dan belakang yang munasabah dan pemilihan teknologi, kami boleh membina aplikasi web berskala yang menyesuaikan diri dengan keperluan yang berbeza. Harap artikel ini membantu anda! 🎜

Atas ialah kandungan terperinci Cara membina aplikasi web berskala menggunakan Vue.js dan Ruby. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!