Vue sprockets-vue 把 .vue 文件和 Rails Asset Pipeline 结合起来

kikyous · 2016年10月25日 · 最后由 BoleLee 回复于 2017年04月11日 · 5471 次阅读

https://github.com/kikyous/sprockets-vue

可以在 rails 项目中直接使用.vue 文件,不用 vue-loader, webpack 什么的,直接和 Rails Asset Pipeline 结合

单独.vue 文件的优势

  • 方便管理
  • template 放在独立的位置,不用写在字符串里,可以利用现有的编辑器语法高亮和智能缩进
  • 组件包含自己的样式
  • ...

sprockets-vue

  • sprockets-vue 支持全部 template, script, style 标签(不支持 scoped)
  • 在 js 或 vue 文件中 require .vue 文件: template, script 编译出的对象存储在VCompents[filename]里面
  • 在 css 文件中 require .vue 文件: style 标签里的内容被处理后会添加在相应的位置(可以用 require_tree 包含所有的.vue 文件样式)
  • script 暂时只支持 coffee

示例

index.vue

//= require compents/card
<script lang="coffee">
{
  data: ->
    search: ''
    members: []
  components:
    card: VCompents['compents/card']
  methods:
    clear: ->
      this.search = ''
}
</script>

<template>
  <div class="container">
    <div class='search icon-input'>
      <span class="search-icon glyphicon glyphicon-search"></span>
      <input class="form-control" type="text" v-model='search'>
      <span @user1='clear' class="clear-icon glyphicon glyphicon-remove"></span>
    </div>
    <card v-for="m in members" :m='m'></card>
  </div>
</template>

<style lang="scss">
  @import "bootstrap-sprockets";
  @import "bootstrap/variables";
  @import "bootstrap/mixins";

  // Reset and dependencies
  @import "bootstrap/normalize";
  @import "bootstrap/glyphicons";

  // Core CSS
  @import "bootstrap/scaffolding";
  @import "bootstrap/code";
  @import "bootstrap/forms";

  @import "bootstrap/media";
  @import "bootstrap/list-group";
  @import "bootstrap/panels";

  @import "bootstrap/utilities";
}
</style>

application.coffee

#= require index

new Vue(
  el: '#search',
  components: {
    'index': VCompents.index
  }
)

application.scss

//=require index

抱歉,最新版(支持 style)昨晚没有上传到 rubygems 上去,现在好了

使用 .vue 遇到个头疼的问题,修改个东西需要来回滚,滚来滚去最后都不知道修改的哪个地方,如果分成多个文件,切换 tab 就不会有这样的问题。

#2 楼 @greatghoul 13 寸的 RMBP 太捉急了,上 27 寸显示器😁

#2 楼 @greatghoul

试了一下,可以把组件分成多个文件,sprockets-vue 只需小小的改动:

  • index.vue 里面包含 script
  • index.tpl.vue 里面包含 template
  • index.style.vue 里面包含 style

index.vue

//= require_self
//= require index.tpl
//= require index.style
<script lang="coffee">
{
  data: ->
    members: []
    search: ''
    page: 0
}
</script>

index.tpl.vue

<template>
  <div>
    <div class='search icon-input' v-if='search_box'>
      <span class="search-icon glyphicon glyphicon-search"></span>
      <input class="form-control" type="text" v-model='search' placeholder='输入姓名/公司/产品搜索'>
      <span @user2='clear' class="clear-icon glyphicon glyphicon-remove"></span>
    </div>
    <card v-for="m in members" :m='m'></card>
    <infinite-loading :on-infinite="onInfinite"></infinite-loading>
  </div>
</template>

index.style.vue

<style lang="scss">
  @import "bootstrap-sprockets";
  @import "bootstrap/variables";
  @import "bootstrap/mixins";

  // Reset and dependencies
  @import "bootstrap/normalize";
  @import "bootstrap/glyphicons";
</style>

增加了测试

请教一下 rails 项目适合引入 vue 或者 react 之类的前端框架吗?很少看到社区内有这样做的.. 似乎隔壁 laravel 社区挺拥抱 vue 的

#7 楼 @lwd369 适合呀,我们都有在用

#8 楼 @nine 是用 npm 来引入和管理依赖吗?还是直接引入 js 文件使用呢?网上都没找到 demo 可以参考一下。。我之前一直以为 vue 之类的只适合做前后端分离应用

#9 楼 @lwd369 我们公司项目都是直接引入 js 文件

#10 楼 @kikyous 是在需要绑定操作的地方局部使用吗。 那像这个帖子里用.vue 文件做组件化开发的情况是不是比较少哇

#9 楼 @lwd369 vue 目前只是最简单的应用。react 使用 react_on_rails + ant.design

lwd369 回复

你的问题也是我一直的疑问,因为 vue 绑定很方便,又比较轻,我一般会把 js 文件直接拿过来用,但对于单文件组件.vue,vue-router 这些,一直都没有找到比较成熟的用法,laravel 的话之前公司是用 laravel,也还没有机会试过直接使用单文件组件。你有什么新的发现吗

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