如何为传统网站构建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，那么您可以简单地配置vue以使用任何其他id将其内容呈现到app中。只需打开index.js并在$mount函数中指定您的自定义id即可。