现有html页面中的Vue组件

6mw9ycah 于 2023-02-19 发布在 Vue.js

关注(0)|答案(2)|浏览(131)

我想知道是否有可能在existingghtml页面中使用vue3。我有一个巨大的项目，它是用另一个框架编写的，将提供空的html页面，必须用vue开发。这可能吗？我想用cdn，但我听说它对生产不好。

vue.js

来源：https://stackoverflow.com/questions/69843579/vue-components-in-existing-html-pages

2条答案

按热度按时间

xwbd5t1u1#

当然，您可以将Vue用作现有HTML页面的小部件，以填充内容或使其更具交互性。
您将需要一个专用的HTML容器元素，如<body>中的<div id="app">，不过Vue可以挂载到。
超文本：

<div id="app">
      <div class="test">({{ testMessage }})</div>
</div>

通过CDN将Vue加载到您的页面：

<script src="https://unpkg.com/vue@3.2.21/dist/"></script>

自定义JS以配置、创建Vue示例并将其装载到<div id="app">：

<script>
const app = {
  data() {
    return {
      testMessage: 'World domination!';
    }
  }
}

Vue.createApp(app).mount('#app');
</script>

赞(0）回复(0）举报 2023-02-19

rnmwe5a22#

如果您想在现有HTML页面中使用Vue，并安装npm和webpack，则必须更改代码中的导入。
代替

import { createApp } from 'vue';

使用

import { createApp } from 'vue/dist/vue.esm-bundler.js';

基于控制台中Vue建议的解决方案

[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js". 
  at <App>

在Vue文档中也有一条注解，请访问https://v3.ru.vuejs.org/guide/installation.html#with-a-bundler

赞(0）回复(0）举报 2023-02-19

我来回答

现有html页面中的Vue组件

2条答案

相关问题

热门标签

最新问答