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

renyuanz · 发布于 2016年05月17日 · 最后由 famicne 回复于 2017年11月06日 · 4695 次阅读
17038

英文原版: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,正好发现了这个,分享给大家。

共收到 7 条回复
6361

目前是直接 gem 'vuejs-rails'

3790

不错。

845

用 rails-assets 配置也不错

17038

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

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

17580

#4楼 @renyuanz

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

17580 seaify Vue.js + Rails 的设计问题 中提及了此贴 10月01日 11:36
1ba460

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

96

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

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册