Stimulus Rails 项目教程

Stimulus Rails 项目教程

1. 项目的目录结构及介绍

Stimulus Rails 项目的目录结构如下：

stimulus-rails/
├── app/
│   ├── assets/
│   │   └── javascripts/
│   │       └── controllers/
│   │           └── application_controller.js
│   │           └── index.js
│   │           └── hello_controller.js
│   └── views/
├── bin/
├── config/
│   ├── initializers/
│   │   └── stimulus.rb
│   └── routes.rb
├── db/
├── lib/
├── public/
├── test/
├── vendor/
├── Gemfile
├── Gemfile.lock
└── README.md

目录介绍

• app/assets/javascripts/controllers/: 存放 Stimulus 控制器文件。
  • application_controller.js: 主控制器文件。
  • index.js: 控制器索引文件，用于加载所有控制器。
  • hello_controller.js: 示例控制器文件。
• config/: 配置文件目录。
  • initializers/stimulus.rb: Stimulus 初始化配置文件。
  • routes.rb: Rails 路由配置文件。
• Gemfile: 项目依赖管理文件。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

Stimulus Rails 项目的启动文件主要包括：

• config/initializers/stimulus.rb: 该文件用于初始化 Stimulus 配置。

# config/initializers/stimulus.rb
require "stimulus/manifest"

Stimulus::Manifest.generate(Rails.root)

• app/assets/javascripts/controllers/index.js: 该文件用于加载所有 Stimulus 控制器。

// app/assets/javascripts/controllers/index.js
import { application } from "controllers/application"
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"

eagerLoadControllersFrom("controllers", application)

3. 项目的配置文件介绍

Stimulus Rails 项目的配置文件主要包括：

• Gemfile: 用于管理项目依赖。

# Gemfile
gem 'stimulus-rails'

• config/initializers/stimulus.rb: 用于初始化 Stimulus 配置。

# config/initializers/stimulus.rb
require "stimulus/manifest"

Stimulus::Manifest.generate(Rails.root)

• app/assets/javascripts/controllers/application.js: 主控制器文件。

// app/assets/javascripts/controllers/application.js
import { Application } from "@hotwired/stimulus"

const application = Application.start()

// Configure Stimulus development experience
application.debug = false
window.Stimulus = application

export { application }

通过以上配置，可以确保 Stimulus 在 Rails 项目中正确运行。