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使用非常愉快，语法优雅。
➡️
