时间戳

首页 > 解决方案 > 传统网站如何搭建Vue（jquery替换）

vue.js - 传统网站如何搭建Vue（jquery替换）

问题描述

我现在正在研究在现有项目中使用 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” 容器中的所有现有内容被替换。

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

标签： vue.jswebpackvue-cli

解决方案

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

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

推荐阅读