Question

我正在使用coffeescript重构旧的Rails应用程序，然后切换到Webpacker，ES6和Vue。我需要保留jquery，很多组件都需要库，所以我有一些Vue组件和一些jquery组件。

现在我正在处理：

全局初始化脚本，每个页面上使用的jquery组件
特定页面脚本，在特定页面上使用的jquery组件
供应商捆绑包

对于app/javascript/packs/admin.js中的全局初始化脚本，

// init global javascript
import '../admin/global/init';
import '../admin/global/app.menu';
import '../admin/global/app.fileinput';
import '../admin/global/app.dateinput';

init.coffee在哪里

window.App ||= {}

App.init = ->
  App.fileInput.init()
  App.dateInput.init()

$(document).on "turbolinks:load", ->
  App.init()

fileinput.coffee就像

App.fileInput =
  init: ->
    $('.file .file-input').on 'change', ->
      $('.file-name').html(this.files[0].name) if this.files.length > 0

对于特定于页面的脚本，我在主体上使用data属性，然后

class Init
  constructor: ->
    page = "#{$('body').data('page')}"
    @execute_page_js(page)
  execute_page_js: (page) ->
    if 'function' is typeof window.App[page]
      klass = window.App[page]
      new klass()

$(document).on 'turbolinks:load', ->
  new Init()

然后是每个页面的特定脚本

class App.adminHomeIndex
  constructor: ->
    console.log 'test'

对于一个特定的页面，我可以有一个Vue组件，所以在我看来

- content_for(:javascript_packs) do
  == javascript_pack_tag 'admin/product/form', 'data-turbolinks-track': 'reload'
  == stylesheet_pack_tag 'admin/product/form'

#app-container

和我的背包

import Vue from 'vue/dist/vue.esm'
import ImageUpload from '../../../admin/components/ImageUpload.vue'
import Slider from '../../../admin/components/Slider.vue'

document.addEventListener('DOMContentLoaded', () => {
  const vueApp = new Vue({
    el: '#app-container',

    components: {
      'image-upload': ImageUpload,
      'slider': Slider
    },
  })
})

我正在学习ES6，我正在寻找一种方法来保持从咖啡脚本到ES6的相同结构。

是否可以将用于vue组件的特定于页面的包也用于初始化jquery组件？我正在尝试在线查找良好的es6代码组织指南，但是找不到任何参考...

具有Vue和JQuery代码组织的Rails和ES6

0 个答案: