DEV Community
·
在Rails 7及以上版本中使用vite_rails集成Vue单文件组件（.vue）
💡
原文英文，约1000词，阅读约需4分钟。
📝
内容提要
Rails Hotwire虽然优秀，但在某些情况下需要更灵活的解决方案，Vue.js是一个理想选择。通过vite_rails，可以轻松将.vue文件集成到Rails中，方便管理组件。配置完成后，可以在Rails中使用Vue组件，并通过API传递数据。
🎯
关键要点
- Rails Hotwire在某些情况下需要更灵活的解决方案，Vue.js是一个理想选择。
- 通过vite_rails，可以轻松将.vue文件集成到Rails中，方便管理组件。
- 配置vite_rails时，需要在Gemfile中添加vite_rails并运行bundle install。
- 运行bundle exec vite install会添加基本配置文件并注入代码片段到视图模板中。
- vite dev服务器可以实时转译代码，支持热模块替换（HMR）。
- 安装Vue和@vitejs/plugin-vue模块以支持Vue单文件组件（SFC）。
- 在vite.config.ts中配置@vitejs/plugin-vue以识别SFC。
- 创建App.vue文件并在index页面中设置挂载点。
- 通过Rails控制器传递数据到Vue组件，使用data-*属性传递props。
- 在application.js中解析data-props并将其传递给App.vue。
- Vue.js SFC结合Rails使用非常愉快，语法优雅。
❓
延伸问答
如何在Rails中集成Vue单文件组件？
可以通过vite_rails将.vue文件集成到Rails中，首先在Gemfile中添加vite_rails并运行bundle install，然后运行bundle exec vite install进行基本配置。
使用vite_rails时需要安装哪些模块？
需要安装Vue和@vitejs/plugin-vue模块，以支持Vue单文件组件的编译和识别。
如何在Rails控制器中传递数据给Vue组件？
可以在Rails控制器中设置实例变量，并通过data-*属性将其传递给Vue组件，Vue组件在挂载时可以接收这些props。
vite dev服务器的作用是什么？
vite dev服务器可以实时转译代码，并支持热模块替换（HMR），使开发过程更加高效。
如何创建和挂载第一个Vue组件？
创建App.vue文件并在index页面中设置挂载点，然后在application.js中导入App.vue并挂载到指定的DOM元素上。
Rails Hotwire与Vue.js的比较是什么？
Rails Hotwire适合简单的交互，但在需要更灵活的解决方案时，Vue.js提供了更强大的组件管理能力。
➡️
