Vue 单文件组件 - 在没有渲染功能的情况下给出奇怪的输出答案

【问题标题】：Vue single file components - giving strange output without render functionVue 单文件组件 - 在没有渲染功能的情况下给出奇怪的输出
【发布时间】：2019-09-28 05:39:37
【问题描述】：

我有一个现有项目，我想在其中添加一个 vue 组件。但我不想把整个网站变成一个 Vue 应用程序——只是在页面上添加一些组件。但我希望能够使用单文件组件和 webpack。

如果我用 CDN 这样做，它就可以工作。

<html>
<head>
    <script src="https://unpkg.com/vue"></script>   
</head>
<body>
    <div id="app">
        <div>Static div</div>

        <my-component></my-component>
    </div>

    <script type="module">
        import MyComponent from './MyComponent.js'

        new Vue({
            el: '#app',
            components: { MyComponent },
        })
    </script>
</body>
</html>

但是，如果我尝试使用 .vue 单文件组件和 webpack 来实现它，那么它就无法正常工作。它用以下内容替换了我的#app div：

index.js

import Vue from 'vue';
import MyComponent from './MyComponent';

new Vue({
  el: '#app',
  components: { MyComponent },
});

但是，如果我添加一个渲染函数，那么它就可以工作，但在这种情况下，它会用 App 组件替换我的 div#app。我不想那样。我只是想像使用 CDN 一样向我的 div#app 添加一些组件。

import Vue from 'vue';
import App from './App';

new Vue({
  el: '#app',
  render: h => h(App),
});

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

那你能做到吗？

<div id="app">
  <div>Static div</div>

  <div id="vueApp"></div>
</div>

import Vue from 'vue';
import App from './App';

new Vue({
  el: '#vueApp',
  render: h => h(App),
});

【讨论】：

要对我需要添加到页面的每个组件执行此操作吗？
您可以将所需的所有组件添加到一个文件中，例如app.vue 并在div#vueApp 中呈现它
如果它们不是全部在 div#vueApp 中而是在页面周围的许多不同 div 中呈现怎么办？
嗯，这是一个与你问的完全不同的问题 ;-)