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

kikyous · October 25, 2016 · Last by BoleLee replied at April 11, 2017 · 8929 hits

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

5 likes

kikyous #1 October 26, 2016

抱歉，最新版（支持 style）昨晚没有上传到 rubygems 上去，现在好了

greatghoul #2 October 26, 2016

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

kikyous #3 October 26, 2016

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

kikyous #4 October 26, 2016

#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>