DEV Community
·
在Rails 7及以上版本中使用vite_rails集成Vue单文件组件（.vue）
内容提要
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的结合优势
Rails Hotwire虽然功能强大，但在需要更高交互性的场景中，Vue.js提供了更灵活的解决方案。通过vite_rails集成Vue单文件组件，可以更方便地管理和使用组件，提升开发效率。
配置注意事项
在配置vite_rails时，确保在Gemfile中正确添加依赖，并运行相关命令以生成配置文件。特别是，vite dev服务器的实时转译功能对于开发过程中的调试和修改非常重要。
数据传递的技巧
通过Rails控制器将数据传递给Vue组件时，可以利用data-*属性来传递props。这种方法简化了数据的传递过程，使得Vue组件能够直接使用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提供了更强大的组件管理能力。
