10分钟上手 Stimulus-Rails：从安装到第一个控制器的快速教程

10分钟上手 Stimulus-Rails：从安装到第一个控制器的快速教程

【免费下载链接】stimulus-railsUse Stimulus in your Ruby on Rails app项目地址: https://gitcode.com/gh_mirrors/st/stimulus-rails

Stimulus-Rails 是一款专为 Ruby on Rails 应用设计的轻量级 JavaScript 框架，它能帮助开发者轻松实现页面交互逻辑，让前端开发变得简单高效。通过本教程，你将在短短10分钟内完成从安装到创建第一个控制器的全过程，快速掌握 Stimulus-Rails 的核心使用方法。

一、三种快速安装方式，总有一款适合你

Stimulus-Rails 提供了多种安装方式，可根据你的项目需求灵活选择：

1.1 使用 Importmap 安装（Rails 7+ 推荐）

Importmap 是 Rails 7 引入的新特性，无需 Node.js 即可管理 JavaScript 依赖。安装命令如下：

./bin/rails stimulus:install:importmap

该命令会自动将必要的 Stimulus 文件复制到项目中，并在config/importmap.rb中添加相关配置，如：

pin "@hotwired/stimulus", to: "stimulus.min.js" pin "@hotwired/stimulus-loading", to: "stimulus-loading.js" pin_all_from "app/javascript/controllers", under: "controllers"

1.2 使用 Node.js 安装

如果你习惯使用 Node.js 管理依赖，可以选择这种方式：

./bin/rails stimulus:install:node

此命令会复制控制器文件到app/javascript/controllers/index_for_node.js，并通过 npm 安装 Stimulus 包。

1.3 使用 Bun 安装（现代 JavaScript 运行时）

Bun 是一个快速的 JavaScript 运行时，如果你正在使用它，可以执行：

./bin/rails stimulus:install:bun

安装完成后，Bun 会自动添加 Stimulus 依赖，让你的项目启动更快。

二、创建第一个 Stimulus 控制器，实现交互效果

安装完成后，我们来创建一个简单的控制器，体验 Stimulus 的强大功能。

2.1 生成控制器

使用 Rails 生成器可以快速创建一个 Stimulus 控制器：

./bin/rails generate stimulus hello

这条命令会在app/javascript/controllers/目录下生成hello_controller.js文件。你也可以通过修改任务文件lib/tasks/stimulus_tasks.rake来自定义生成器行为。

2.2 编写控制器逻辑

打开生成的hello_controller.js文件，添加以下代码：

import { Controller } from "@hotwired/stimulus" export default class extends Controller { connect() { this.element.textContent = "Hello, Stimulus!" } }

这段代码定义了一个简单的控制器，当元素连接到页面时，会显示 "Hello, Stimulus!" 文本。

2.3 在视图中使用控制器

在 Rails 视图文件中添加以下 HTML：

<div contenteditable="false">【免费下载链接】stimulus-railsUse Stimulus in your Ruby on Rails app项目地址: https://gitcode.com/gh_mirrors/st/stimulus-rails