JavaScript (转载) 在 Rails 中集成 Vuejs 的四种方法

renyuanz · May 17, 2016 · Last by famicne replied at November 06, 2017 · 8408 hits

英文原版: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:

有没有 React 的版本?

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


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

目前是直接 gem 'vuejs-rails'

用 rails-assets 配置也不错

不过这四套方案中,都把 turbolinks 拿掉了。我个人是很喜欢 turbolinks 的,所以怎么权衡看大家喜好。

btw gem 'vuejs-rails' 也建议把 turbolinks 禁用的

#4 楼 @renyuanz

使用第 3,4 种,可以直接使用.vue 文件,但是有许多 plugin 如https://github.com/hilongjw/vue-lazyload, 是通过 npm 来安装的,browserify-rails,感觉这种就够了。 webpack,总感觉在 rails 里有些多余了,纯前端项目里,应该用处还多些

seaify in Vue.js + Rails 的设计问题 mention this topic. 01 Oct 11:36

#1 楼 @nine 这个只是加了 assets,不能执行 vue 文件

第一种方案,好像没引入 vue 把。

You need to Sign in before reply, if you don't have an account, please Sign up first.