英文原版：chrisvfritz/rails-javascript-integrations

在 Rails 中集成 Vuejs 的四种方法

为什么做？

模块化的视图层让 UI 开发变得异常简单。但开发大规模的 UI 组件并在 Rails 项目中集成一个现代的 JavaScript 框架却有一些棘手。

怎么做？

这个项目用四种不同的方法集成了 Vuejs 来完成一个简单的 todo list :

• scoped-jquery: 这是我最不推荐的方法。但是，如果你的团队重度使用 jQuery，这可能是一个最简单的方法。
• vue-simple: 这是一个非常适合现有项目的方案，因为 Vuejs 能很好的与 jQuery 类的库协作。这个方案只需要 1 分钟的配置，非常有效率。
• vue-browserify: 推荐给大部分新项目的方案。它大概会花你半小时的配置时间，但是这个方案提供了一个 UMD module 解决方法，可以方便的设置热加载等特性，最棒的是，这个方案非常通俗易懂，如果你还接受不了 webpack 的话，我建议你选这个。
• vue-webpack: 推荐给想用 webpack 爱折腾的人。

具体步骤？

有两种方法，第一种是查看四种方案依次与前一种作比较的 diff：

1. master..scoped-jquery: Adds the todo model and API, with a single JavaScript file.
2. scoped-jquery..vue-simple: Converts the scoped jQuery to a much simpler Vue component.
3. vue-simple..vue-browserify: Moves all JavaScript to a new frontend folder managed by Browserify. Components are also organized into more advanced components in .vue files.
4. vue-browserify..vue-webpack: Bypasses sprockets and all view-related Rails features, now managing the entire UI in the frontend folder through Webpack.

或者，直接看各种方案与master的 diff：

• master..scoped-jquery
• master..vue-simple
• master..vue-browserify
• master..vue-webpack

有没有 React 的版本？

我在过去的一年里大量使用了 React，是 React 给我打开了一扇新的大门，但是我想说的是 React 能做的 Vue 实现起来更简单。 而且，Vue 2.0 就要发布了，新版本的特性让 React 仅存的一些优点也荡然无存了，所以我还是推荐你使用 Vue

最近在项目里用了 Vue，正好发现了这个，分享给大家。