传统网站如何搭建Vue（jquery替换）

Question

我现在正在研究在现有项目中使用 Vue 来替代 jquery。我遵循了 Vue 入门指南，并且能够使用 vue 重新创建所有功能。我创建了多个单文件组件（.vue 文件）并使用 http-vue-loader 将它们加载到我现有的模板中：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/http-vue-loader"></script>
<script>
        new window.Vue({
                el: '#app',
                components: {
                        'user-button': window.httpVueLoader('components/UserButton.vue'),
                        'like-button': window.httpVueLoader('components/LikeButton.vue'),
                        ... 
                },
        })
</script>

这很好用，我现在可以简单地包括 <user-button></user-button> 在模板中，按预期呈现用户按钮。

我现在正在考虑优化我的代码，但我找不到任何有关如何继续的信息。我可以在生产中使用此代码并使用 http-vue-loader 导入组件，还是有办法使用 vue-cli 或 webpack 构建代码？我只是使用 vue 为网站添加附加功能。主要内容是在服务器端生成的。该内容需要添加Vue组件。

我尝试将组件添加到使用 vue-cli 创建的示例项目中，并构建脚本。这很好用，但是我不能在我的网站上使用脚本。嵌入脚本会导致 in=“app” 容器中的所有现有内容被替换。

谁能指出我应该如何进行的正确方向？

Answer 1

首先，您在说什么“优化”？如果一切正常，我不明白你的问题是什么。

关于使用 vue-cli 构建，如果您的应用程序已经在某处使用了 id app，您可以简单地配置 vue 以将其内容呈现到具有任何其他 id 的 div 中。只需打开index.js 并在$mount 函数中指定您的自定义ID。