Comment créer des applications Web évolutives à l'aide de Vue.js et Ruby

Comment créer des applications Web évolutives à l'aide du langage Vue.js et Ruby

Ces dernières années, avec le développement d'applications Web et la demande croissante, la création d'applications Web évolutives est devenue un sujet important. En tant que framework frontal JavaScript léger, Vue.js fournit une solution flexible, efficace et évolutive. Dans le même temps, Ruby, en tant que langage de programmation concis et facile à lire, peut être utilisé pour construire de puissants systèmes back-end. Cet article expliquera comment combiner le langage Vue.js et Ruby pour créer des applications Web évolutives et joindra des exemples de code correspondants.

Tout d’abord, nous devons créer une structure de base du projet. Dans le répertoire racine du projet, utilisez un outil de ligne de commande Ruby (tel que Bundler) pour créer une nouvelle application Ruby et installez les dépendances nécessaires :

bundle init

Ensuite, ajoutez le Ruby nécessaire dans le Gemfile Bibliothèques de fichiers et frameworks tels que 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

Exécutez la commande suivante pour installer les dépendances :

rrreee

Ensuite, nous devons créer un simple contrôleur Ruby on Rails et une vue pour le rendu de notre application Vue.js. Exécutez la commande suivante dans la console :

rrreee

Ensuite, ouvrez le fichier app/controllers/welcome_controller.rb généré et ajoutez le code suivant : 🎜rrreee🎜Ensuite, créez un fichier appelé index . Le fichier de vue de html.erb, le chemin est app/views/welcome, et ajoutez le code suivant : 🎜rrreee🎜app/assets/javascripts. dans le répertoire racine >Créez un fichier JavaScript nommé app.js dans le dossier et ajoutez le contenu suivant : 🎜rrreee🎜Créez un composant Vue nommé app.vue avec le chemin app/assets/javascripts et ajoutez le code suivant : 🎜rrreee🎜À ce stade, nous avons terminé les paramètres d'intégration de base front-end et back-end. Ensuite, nous devons utiliser Webpack pour créer et empaqueter notre application Vue.js. Tout d'abord, installez Webpack et les dépendances associées : 🎜rrreee🎜 Ensuite, créez un fichier de configuration Webpack nommé webpack.config.js et ajoutez le contenu suivant : 🎜rrreee🎜Ensuite, nous devons modifier app /views/welcome/index.html.erb, remplacez le fragment <div id="app"></div> précédent par <div id ="app"><%= javascript_pack_tag 'bundle' %></div>. 🎜🎜Maintenant, nous pouvons exécuter Webpack pour créer notre application Vue.js : 🎜rrreee🎜Enfin, nous devons démarrer le serveur Ruby on Rails pour afficher et tester notre application Web : 🎜rrreee🎜Ouvrez http dans votre navigateur : //localhost:3000, vous verrez une page de bienvenue avec un bouton de compteur Vue.js. Lorsque vous cliquez sur le bouton, la valeur du compteur sera incrémentée. 🎜🎜Grâce à la méthode ci-dessus, nous avons combiné avec succès le langage Vue.js et Ruby pour créer une application Web évolutive. Vue.js offre de puissantes capacités de développement front-end, tandis que le langage Ruby offre un support back-end flexible et facile à utiliser. Grâce à cette combinaison, nous sommes en mesure de créer des applications Web performantes et évolutives. 🎜🎜Ci-dessus sont les étapes détaillées pour créer une application Web évolutive à l'aide du langage Vue.js et Ruby. Grâce à une intégration frontale et back-end raisonnable et à une sélection de technologies, nous pouvons créer des applications Web évolutives qui s'adaptent à différents besoins. J'espère que cet article vous aidera ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!