Question

在这个项目中，我正在研究一个遗留服务器渲染的网页，有些组件遇到了我已经被分配修复的问题，我说服团队在Vue中重写这些部分以启动kickstart我们的迁移。

我使用Vue CLI提供的Webpack模板编写了整个迷你应用程序，它在某个特定环境中就像一个魅力......

如果我npm run build，构建的index.html也可以在静态服务器中正常工作。

但是，我似乎无法将该应用程序包含在由许多其他元素组成的现有页面中。难道不如将<div id='myApp'></div>元素添加到HTML并加载生成的JS文件一样简单吗？

如果有帮助，遗留应用程序是使用.erb模板的Rails应用程序，JS文件通过application.js中的主管道加载。

当我尝试这个时，有谁知道为什么没有发生？

编辑：更多信息 - 这是main.js在构建之前的样子：

/* eslint-disable */
import Vue from 'vue'

// UI components
import VueSelect from 'vue-select'

import DynamicForm from './components/DynamicForm/'

Vue.component('vue-select', VueSelect)
Vue.config.productionTip = false

const DynamicForms = new Vue({
   el: '.dynamic-form',
   render: h => h(DynamicForm)
})

编辑：我设法通过使用Webpacker将Webpack集成到Rails来使Vue工作。但是我仍然有一些关于背景的问题：

这是其中一个Vue组件中的main.js。它工作正常，直到我尝试PropData特技，所以我可以在几个地方重用不同数据的组件。

/* eslint-disable */
import Vue from 'vue'

// UI components
import VueSelect from 'vue-select'
// import 'nouislider'

import DynamicForm from './components/DynamicForm/'

import fields from './fields'
import fieldRules from './field-rules'

Vue.component('vue-select', VueSelect)
Vue.config.productionTip = false

document.addEventListener('DOMContentLoaded', () => {
  const el = document.createElement('div')
  document.querySelector('.dynamic-form').appendChild(el)

  const vm = new DynamicForm({
    propsData: {
      fields,
      fieldRules
    },
    el,
    render: h => h(DynamicForm)
  })
})

这是DynamicForm/index.vue

<template>
  <div id='app'>
    <ParamList :fields='paramFields' :fieldRules='paramRules'></ParamList>
    <Output></Output>
  </div>
</template>

<script>
import Vue from 'vue'

import ParamList from './ParamList'
import Output from './Output'

export default Vue.extend({
  props: [ 'fields', 'fieldRules' ],
  name: 'DynamicForm',
  components: {
    ParamList,
    Output
  },
  data () {
    return {
      paramFields: this.fields,
      paramRules: this.fieldRules
    }
  }
})
</script>

<style>
</style>

field和fieldData道具仅仅是JSON / JSONP，我将在这些组件中使用一些数据。我的想法是，在启动Vue实例时，我可以编写另一个main.js，只更改field和fieldData。

我做错了什么？

Answer 1

我已经设法通过对我的组件进行三步更改来修复所有内容。

使用Webpacker将Webpack集成到Rails中。甚至还有一个Vue模板！
使用Vue.extend将根组件（安装在真实DOM元素上的组件）更改为Vue子类（因此模块行@ .vue文件读取export default Vue.extend({而不是简单export default { }
从new DynamicForm（我指定的Vue.extend名称）删除渲染功能，以便渲染自己的模板。

我希望它有所帮助，因为这对我来说非常痛苦！

如何将VueJS应用程序插入现有页面？

1 个答案: