Vue - 常见疑问：（第一弹）

最新推荐文章于 2024-07-07 21:07:20 发布

翻译最新推荐文章于 2024-07-07 21:07:20 发布 · 430 阅读

文章标签：

#Vue #译文

前端同时被 2 个专栏收录

25 篇文章

订阅专栏

译文

4 篇文章

订阅专栏

本文解答了关于Vue.js的一系列常见问题，包括项目配置、ES6+与ES5选择、Vue实例与组件的区别、第三方库集成及代码可见性等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概要

这里有一些我看到的问题。让我试着回答它们：

Do you need a complex project setup?

你需要一个复杂的项目配置吗？

Should you use ES6 or ES5?

你应该使用ES6还是ES5?

What’s the difference between Vue Instances and Vue Components?

Vue实例和Vue组件之间的不同是什么？

How can you integrate 3rd Party JS and CSS Libraries?

如何集成第三方 JS 和 CSS 库？

Everyone can see my code!

每个人都能看到我的代码!

“Can you use Vue with Redux?”

可以一起使用 Vue 和 Redux 吗？

Can you use Vue with PHP/Node/…?

你能和 PHP/Node/…一起使用 Vue 吗？

My State is Lost after a Page Refresh!

我的状态在刷新页面后丢失！

“Can I host my app on Heroku etc?”

我可以在 Heroku 上托管我的应用程序吗?

My Routes are broken after Deployment!

我的路由在部署后被破坏了!

解答部分

（1）我需要一个复杂的配置吗?

请问：你是否只是导入 vue.js 到你的 .html文件，然后开始写很棒的 Vue 代码?

如果答案是：Yes，你可以那样做，你并不需要一个复杂的配置（比如，使用 Webpack，Babel 和其他的）。

开始使用 Vue 最容易的方法就是添加下面的代码到你的 HTML文件中：

<body>
    ...
    <script src="path/to/vue.js"></script>
</body>

当然，您也可以使用CDN链接。

你可能想要一个更复杂的设置——那意味着一个构建工作流，包括JavaScript的传输、链接、绑定等等——用于更大的应用程序，如果你正在构建单页应用程序(SPAs)。

为什么呢？

简单地说，对于作为开发者的你，这是很容易的！

你会得到很多方便的特色，如果你写了糟糕或错误的代码会有警告，高度优化代码，你可以使用单文件组件（Single File Components）—一个在创建SPAs时特别有用的特性。

但是如果你只是试图给你的 app 添加一些 Vue 魔法，那就用简单的 drop-in 方法吧。

如果你想要一个更复杂的工作流，我强烈推荐使用 Vue CLI - 这可以让这个项目配置变得轻而易举!

（2）你应该使用 ES6+ 还是 ES5 ?

这是另一个我看到很多的问题。ES6+ vs ES5?

ES6+ 仅仅意味着：“最新的 JavaScript 特性” - 比如箭头函数。

这里是一些 ES5 写的 Vue 代码的例子：

export default {
    methods: {
        onClick: function(event) {
            // do something awesome
        }
    }
}

这是用 ES6+ 写的：

export default {
    methods: {
        onClick(event) {
            // do something awesome
        }
    }
}

你应该使用哪一个?

答案是：这完全取决于你，但如果你使用下一代的功能，你的生活会更轻松，也更有趣。有些问题更容易解决。

（3）Vue实例和组件之间的区别是什么?

Vue组件在最后扩展Vue实例。您可以访问相同的Vue特性（比如 data，methods，… - 但不包括 el）但是，这里有一个非常重要的区别!

Vue 组件是可复用的。你可以定义你自己的“HTML标签”（例如 my-cool-component）并且可以在你的Vue app中的任何地方使用它（这取决于它被定义为全局组件还是局部组件）。

Vue实例总是只控制DOM的一个元素，因此它不能复用。

这里有一个例子：

<div id="my-app">
    <my-component />
</div>

Vue.component('my-component', {
    template: 'Hi, here is a component!'
});

new Vue({
    el: 'my-app'
});

在这个例子中，我们定义了 my-component 组件，并且在 id 为 my-app 的 <div> 中使用了它。这个 <div> 是通过一个Vue实例控制的，因此它可以渲染 Vue 组件。然后我们可以如我们所想的那样使用这个组件了。

当然，Vue组件模板可以更加复杂，并且可以使用常规的HTML标记和其他组件。

组件是任何东西的核心组成部分，但是对于非常小的Vue应用程序，我强烈建议，在创建它们的时候，查看单文件组件。用那种方法你将得到更多乐趣!

（4）如何集成第三方 JS 和 CSS 库？

“我怎样才能将库XY添加到我的Vue项目中呢?”

这个疑问我也看到很多。好消息是：给一个 Vue 项目添加库是很容易的。我将假设有一个使用CLI创建并配置的项目。如果您只是将Vue放入一个HTML文件中，您可以对其他包执行相同的操作。

那么，你如何将一个库添加到一个已创建的项目中呢?

最简单的方法就是使用 npm：

npm install –save my-library

一旦你那样做了，你就可以把它导入到在你的 src/ 文件夹中的 main.js 或者 index.js （你设置那个文件）文件中。

是的，你没看错。- 我没有问它是一个 CSS 库还是 JS 库，您可以导入这两种类型的文件 - Webpack（确切地说：一些webpack模块加载器）将会找到它并确保所有的东西都被正确地打包和载入。

这里是一个例子，一些JS 库看起来应该是如何的：

import 'my-library';
// 或者写成：
import 'path/to/my/file.js';
// 你可以省略后缀 .js
new Vue({...});

对于一个 CSS文件来说，它应该是这样的：

import 'path/to/my/file.css'; 
// 不能省略 .css - Webpack 需要这个
new Vue({...})

（5）每个人都能看到你的代码吗?

如果你打开developer tool，你将会注意到，你可以相对容易地查看你的源代码(甚至是未压缩的源代码，因为资源映射)。

JavaScript在浏览器中运行，而且它不是预编译的——这意味着在网页上的每个人可以读取它。它可能会被压缩和混淆，但这只会使它变得更困难，而不是阻止它。你对此无能为力！

这是一桩交易破坏者吗?

不!它只是意味着你不应该将安全相关或敏感的信息放入你的前端JavaScript代码中。所有其他代码都可以访问，但它通常也不会为黑客提供任何重要信息。

由于您的代码对每个人都是可访问的，所以您应该始终依赖于用户输入的服务器端验证。您可以使用Angular的表单验证功能编写世界上最好的验证代码，但是由于任何使用都可以简单地改写或破坏该代码，您也需要在服务器上进行验证!

前端代码提供了良好的用户体验(例如通过即时验证结果)，而不是保护您的数据库。

参考资料

原文地址
 学习网站