Question

我有一个现有项目，我想在其中添加一个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替换为以下内容：

<-function（e，n，r，o）{返回He（t，e，n，r，o，！0）}->

index.js

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

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

但是，如果我添加了一个render函数，那么它将起作用，但是在这种情况下，它将div＃app替换为App组件。我不想要那个。我只是想像在CDN中一样向div＃app添加一些组件。

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

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

Answer 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),
});

Vue单个文件组件-无需渲染功能即可提供奇怪的输出

1 个答案: