Vue sprockets-vue 0.1 发布,已经有 49 个 star ❤️

kikyous · 2017年02月09日 · 最后由 catfish23 回复于 2018年11月21日 · 7166 次阅读

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

简单的来说这个 gem 就是把.vue 文件转换成 js 对象(不需要 vueloader,webpack 等),让你享受.vue 单文件组件的同时使用 rails 原生一套东西,并保持现有的部署方法

举个栗子

#app.vue

<script lang="coffee">
module.exports = {
  data: ->
    users: []
  methods:
    clear: ->
      this.users = []
}
</script>

<template>
  <ul>
    <li v-for="m in users" :m='m'></li>
  </ul>
</template>

<style lang="scss">
</style>

现在你可以在 js 或者 coffee 中直接引入这个组件:

#application.coffee

#= require app

现在你就可以通过全局变量VComponents来访问 app 了

#= require app
new Vue(
  el: '#main',
  components: {
    'app': VComponents.app
  }
)

更新内容

0.1 是比较大的更新:

  • script 中使用module.exports={}而不是vm={},尽量和 vueloader 保持一直
  • 使用VComponents而不是VCompents
  • script 支持原生 js

感谢 https://github.com/dts 的贡献

支持一下👏

支持原生 js 了?那就是可以使用 es6 的所有新增功能了吗?

#6 楼 @kikyous ES6 里有些很好的功能,没法转成 coffee 啊,就像 import 和 export,我就不知道怎么用 coffee 实现

#7 楼 @kai209209 要用 import 和 export 还是用 webpack 那一套吧😁

#7 楼 @kai209209 coffee 支持 import export,但是不解析模块,需要再加一个 babel 之类的编译器。

ES6 在浏览器环境算不上原生。

目前我是参考了 react_on_rails 的模式,用 webpack 来做构建,然后 build 出来的文件放到 app/assets/javascripts 下面,然后 rails 再去引用

这样既不会影响 assets pipeliine,又能够享受基于 nodejs 所有的构建工具所带来的好处。

hz_qiuyuanxin 回复

可以分享下你的方法吗,发一个项目例子,感激!

本人前端小白,能发个例子么 github 上,这样更好理解,谢谢楼猪

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