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

Posted 2023-02-22

【中文标题】传统网站如何搭建Vue（jquery替换）

【英文标题】：How to build Vue for traditional website (Jquery replacement)

【发布时间】：2020-11-28 21:41:32

【问题描述】：

我现在正在研究在现有项目中使用 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 CDN 而不是 webpack。否则，您将不得不从头开始创建整个网站。

【参考方案1】：

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

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

【讨论】：

我通过构建一个简单的应用程序开始学习 Vue。我使用 vue-cli 构建脚本，从而生成优化和分块的 js 文件。在我当前的设置中，我只是加载我编写的 vue 文件，我想知道这是否是正确的方法，或者是否有一种类似于 vue-cli build 对我编写的代码所做的优化方法。

如果你使用 Vue 来替代 JQuery，我想代码不多而且运行速度很快（目前 Vue 比任何 Web 框架都快），所以不需要优化.

无论如何，你需要某种捆绑器、webpack 或 rollup 来缩小代码，你可以深入了解 vue 部署文档以找到有关配置它们的更多信息：vuejs.org/v2/guide/…（但这样你每次更改都会强制构建代码，所以我认为它不太适合简单的 vue 应用）

太棒了，我想我会保留现在的代码。谢谢你的解释！