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

【问题标题】：How can I insert a VueJS app into an existing page?如何将 VueJS 应用程序插入现有页面？
【发布时间】：2018-09-01 06:01:09
【问题描述】：

在我正在处理的这个项目中，有一个旧的服务器渲染网页，一些组件出现了我被分配修复的问题，我说服团队在 Vue 中重写这些部分以启动我们的迁移。

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

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

但是，我似乎无法将应用程序包含在由许多其他元素组成的现有页面中。不应该像在HTML中添加<div id='myApp'></div>元素并加载生成的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 以及我将在这些组件中使用的一些数据。这个想法是我可以编写另一个 main.js，在启动 Vue 实例时只更改 field 和 fieldData。

我做错了什么？

【问题讨论】：

您能发布您的布局和其他相关的 HTML ERB 文件吗？
您的 ID 上似乎有一个不必要的“#”，认为它应该是
。当您要为该 id 创建 css-rules 时使用“#”。即：#myApp { 颜色：红色；所以它不应该包含在 id 值中。
我也看到你有 el: '.dynamic-form' 所以 Vue 会寻找一个名为 '.dynamic-form' 的元素。尝试将其更改为附加到要连接 Vue 的元素的 id 的名称。因此，如果您的元素如下所示：
那么 'el:' 应该是：'el: '#myApp'。
@ola 打错了，谢谢你指出。至于其他评论，Vue 似乎不喜欢模棱两可。我设法使用 Webpacker 在 Rails 中设置了 Vue，并且我在它之外编写的应用程序可以正常工作，但是我在使用 PropData 时遇到了问题（无法将外部内容传递到 Vue comps）
@Justin 我认为没有必要，因为我已经解决了我最初的问题；但是它仍然没有 100% 有效。我已经编辑了问题

标签： javascript vue.js vuejs2

【解决方案1】：

我已经设法通过对组件的三步更改来修复所有问题。

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

希望对我有帮助，因为这对我来说很痛苦！

【讨论】：