Rails UI 安装与配置指南

Rails UI 安装与配置指南

railsui Rails UI - Free in alpha while I work out the kinks 项目地址: https://gitcode.com/gh_mirrors/ra/railsui

项目基础介绍

Rails UI 是一个为 Ruby on Rails 应用程序提供专业设计和预构建 UI 组件的开源项目。它旨在帮助开发者快速搭建具有吸引力的用户界面，减少从头开始设计 UI 的时间。该项目主要使用 HTML、CSS、JavaScript 和 Ruby 语言编写。

项目使用的关键技术和框架

• Ruby on Rails: 一个用于构建 Web 应用程序的模型-视图-控制器（MVC）框架。
• Tailwind CSS: 一个功能类优先的 CSS 框架，用于快速UI开发。
• Stimulus.js: 一个轻量级的 JavaScript 框架，用于处理视图和行为。
• Webpacker 或其他 JavaScript 打包工具: 用于打包和优化 JavaScript 和 CSS 资源。

准备工作

在开始安装 Rails UI 之前，确保您的系统已经安装以下依赖：

• Ruby（建议版本 >= 2.5.0）
• Rails（建议版本 >= 6.0.0）
• Node.js 和 Yarn
• Git

安装步骤

步骤 1: 创建新的 Rails 应用程序

如果您还没有 Rails 应用程序，首先创建一个新的 Rails 应用程序，并选择使用 Tailwind CSS：

rails new app_name -c tailwind -j esbuild

步骤 2: 添加 Rails UI 到 Gemfile

打开 Gemfile 文件，并添加以下行：

gem 'railsui'

然后运行以下命令安装新的 gem：

bundle install

步骤 3: 安装 Rails UI

使用 Rails 命令安装 Rails UI：

rails railsui:install

步骤 4: 配置 Rails UI

安装后，启动 Rails 服务器：

bin/dev

在浏览器中访问 http://localhost:3000/railsui 来配置您的应用程序，例如设置应用程序名称和支持电子邮件。

步骤 5: 添加 Tailwind CSS 和 JavaScript 打包工具

如果您还没有在现有应用程序中添加 Tailwind CSS 和 JavaScript 打包工具，请按照以下步骤操作：

• 添加 cssbundling-rails gem 到 Gemfile：

  gem 'cssbundling-rails'
  

  然后运行 bundle install。

• 运行以下命令安装 Tailwind CSS：

  ./bin/rails css:install:tailwind
  

• 安装 JavaScript 打包工具（esbuild、rollup、webpack 等）：

  ./bin/bundle add jsbundling-rails
  ./bin/rails javascript:install:esbuild
  

步骤 6: 使用 Rails UI 组件

安装和配置完成后，您可以在 Rails 应用程序中使用 Rails UI 提供的组件和页面了。组件位于 app/views/rui 目录下，您可以将其作为起点，根据自己的需要修改和扩展。

请记得，每次更新 Rails UI 配置时，都会覆盖 app/views/rui 目录下的文件。如果您对页面进行了自定义，请将它们复制到应用程序的其他目录中以保留您的更改。

以上就是 Rails UI 的详细安装和配置指南，按照这些步骤操作，即使是初次使用 Rails 的开发者也能够顺利地集成和使用 Rails UI。

railsui Rails UI - Free in alpha while I work out the kinks 项目地址: https://gitcode.com/gh_mirrors/ra/railsui