传统网站如何搭建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

首先'optimization'你在说什么？如果一切正常，我不明白你的问题是什么。

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

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

How to build Vue for traditional website (Jquery replacement)

webpack

vue.js

vue-cli