✊🏿 👩🏽‍🤝‍👨🏻 👩‍👩‍👦 Vue.js入门所需的一切 🚗 🕺 🏰

在阅读这些行时，您很可能已经听说了称为Vue的JavaScript框架。如果您打算尝试一下，但是您并没有真正想到应该从什么开始，那么本材料是专门为您编写的。它的作者说，他想谈一谈他为什么真的喜欢Vue。此外，他还将向大家介绍四种在Vue中编写第一个应用程序的方法。

材料概述

通常，对于那些刚开始学习某种框架的人，我尽量不要谈论太多解决相同问题的方法。但是在这种情况下，我认为展示一些开发第一个Vue应用程序的方法非常重要。也许您喜欢使用命令行，或者喜欢使用配备图形界面的工具。两者都适合Vue开发。此外，无需借助命令行即可编写Vue应用程序。为此，只需将标签添加到HTML页面即可加载相应的脚本。最后，您可能不需要担心设置开发环境。取而代之的是，您尝试尽快尝试Vue，而不会产生不必要的动作。实际上，无论您采用哪种策略，都可以在这里找到一些帮助您开始使用Vue的方法。

在阅读本资料的过程中，您会遇到指向有用资源的链接。当您阅读整篇文章时，我将告诉您进一步学习Vue时应注意的事项。应当指出，这里我们不会深入探讨Vue的复杂性，也不会考虑该框架的所有可能机制。我们将处理基础知识并转到第一个可运行的应用程序。

首先，让我们谈谈Vue的一些有趣功能。

Vue优势

在我看来，Vue的优势在于该框架对新手的友好程度。 Vue开发团队做了出色的工作，试图确保具有各种资格的开发人员可以快速开始有效地使用该框架。如果您了解HTML，CSS和JavaScript，那么这实际上意味着您距离在Vue上开发功能强大的应用程序仅一步之遥。

我还相信，在三个领先的前端开发工具（Angular，React和Vue）中，Vue的入门门槛最低。出于几个原因，这是正确的，但对我而言，归结为Vue的三个主要功能：

很棒的文档。
精彩的社区。
这是一个渐进的框架。

▍文档

如果您与喜欢Vue的开发人员交谈，那么我认为他们中很多人首先会谈论该框架文档的质量。如果您访问Vue.js，您可能会发现文档分为几个部分：

领导力。在这里，您可以找到Vue.js入门所需的一切。本节分为几个易于理解的小节，向读者介绍开始开发基于组件的应用程序所需的概念。
API 本节提供Vue API的详细说明。例如，如果您遇到不确定的方法，则访问本节将有助于弄清情况。
推荐建议在这里，您可以找到很棒的建议，随后您可以避免出现错误。这些建议可以警告开发人员不要使用反模式。重要的是，这可能不是硬性规定，而是指南。在您熟悉Vue之后，编写一些应用程序，我建议您阅读本节中的材料。我相信这是有关Vue的非常有价值的知识来源。
例子。在这里，您可以找到Vue开发的应用程序示例。在您那里，直到我对组件的开发有所了解，我才会来这里。但是过了一会儿，当您准备学习如何安排成熟的Vue应用程序时，应该学习本节。
食谱书。本部分包含有关Vue的常见问题解答。例如，对于以下问题：“如何执行表单验证？”，“如何进行组件的单元测试？”。同样，这是一种宝贵的资源，但是其材料的开发应推迟到遇到与上面列出的问题类似的时刻。
工具和核心库。 Vue具有出色的工具和核心库。由于我们需要尽快开始编写代码，因此我们不会对此进行详细介绍。我将在此处提供一些材料链接，了解它们的存在是很有用的。因此，在Vue工具中，我要注意以下内容：开发人员工具， Vue CLI ， Vue Loader 。以下是官方库资料的链接： Vue Router ， Vuex ， Vue Server Renderer 。

▍社区

作为程序员，我感到自己参与了几个很棒的社区。 Vue社区就是其中之一。它的成员友善，友善，他们乐于帮助需要帮助的人。我建议在Twitter上关注Vue社区的以下成员。因此，对您来说，最容易了解他们在做什么并找出他们的生活。这里是链接：

UeVue是一个渐进式框架

如果您访问Vue.js的主页，则可以看到它被称为：“渐进式JavaScript框架”。乍一看，这似乎是一种普通的营销策略，但是对Vue的本质有所了解后，您可以了解到事实并非如此。首先，让我们确定“渐进式”一词的含义。它是逐渐或分阶段发生或发展的东西；它是逐步执行的操作。

很快，您将看到在开发Vue应用程序时，可以通过逐步向其引入该框架的功能来进行工作。例如，如果您已经有某个项目，则可以为它配备Vue支持，而不会出现任何问题。您可以从加载Vue脚本并编写几行代码开始。

如果要使用Vue命令行工具Vue CLI来部署具有所需功能的新项目，那么这也不是问题。随着应用程序的增长，并且您需要一些相当高级的功能，例如路由或状态管理，将不难为应用程序配备这些功能。

如前所述，Vue是负担得起的框架。如果您已经了解HTML，CSS和JavaScript，则意味着您已准备好开始使用Vue。事实上，如果您真的想开始编写Vue应用程序，那么我建议您这样做。

选项＃1：连接到页面的Vue脚本

我们探索的第一种使用Vue的方法是使用<script>将Vue脚本连接到页面。如果您已经使用过JavaScript，那么将没有什么新鲜的东西给您。即，我们正在谈论一个事实，即一个HTML页面需要配备一些在JS库中实现的功能。为此，使用<script>将库连接到页面。应该注意的是，这里考虑的使用Vue的方法不仅适合于开发训练应用程序。它可以在实际项目中找到应用。

例如，在程序员工作的组织中，通常很难将新工具，库或框架引入到实际项目中。例如，您非常喜欢使用Vue。您去当局询问是否可以将整个项目重写为Vue。针对这一问题，几乎没有选择将立即被拒绝。如果您提议在您当前从事的某个页面上使用Vue，那么这样的提议很可能会被接受。

在以下示例中，我们将开发一个非常原始的应用程序，这很好，因为考虑其中的一些Vue概念将非常方便。

▍“你好，Vue！”

在此应用程序中，我们将显示文本“ Hello，Vue！”，并在文本下方显示当前时间和日期。然后，我们将编写使日期和时间保持最新的代码。结果，应用程序用户将能够将其用作常规手表，并观察时间的流逝。创建一个新文件夹，在其中创建一个index.html文件，并将以下代码添加到该文件中：

 <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Hello, Vue.js</title> </head> <body> </body> </html>

现在我们有了页面框架，这是将来应用程序的基础。因此，下一步是将Vue.js脚本连接到此页面。在结束</body>上方的页面代码中添加以下内容：

 <!--             --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> </script>

注意评论。他指出了一件重要的事情。即，现在我们已经将要开发的Vue版本连接到该页面。如果某个页面是供实际使用的，则需要将脚本的生产版本连接到该页面。有关此的详细信息，请参见此处。

现在，在连接脚本之后，首先，我们需要将根元素添加到将要连接Vue实例的页面：

 <div id="app"> </div>

之后，创建一个新的Vue实例，并让他知道他需要连接到哪个根元素：

 <script>  const app = new Vue({    el: '#app'  }) </script>

现在创建几个变量。它们将存储我们用于在页面上显示信息的值。这是通过声明data对象的属性来完成的：

 <script>  const app = new Vue({    el: '#app',    data: {      message: 'Hello, Vue!',      now: new Date()     }) </script>

现在数据已经准备好了，我们可以使用Vue在页面上显示数据的功能了。这是通过简单易读的结构完成的：

 <div id="app">  <h1>{{ message }}</h1>  <p>{{ now }}</p> </div>

现在，您可以祝贺自己刚刚创建了第一个Vue.js应用程序。如果在浏览器中打开index.html ，则它应显示一个页面，上面写着“ Hello，Vue！”。此题词下方应是一行，显示当前日期和时间。在开发和研究示例版本的过程中，我使用了Visual Studio Code和Live Server扩展。

我们在这里所做的工作看起来并不是一个特别高级的项目。但是在Vue的肠子中，发生了许多事情，这些事情使该项目能够按我们需要的方式工作。该框架在DOM和数据之间建立了连接，之后应用程序开始响应。我们如何检查呢？非常简单-只需打开JS控制台（在应用程序页面上），然后在app.message编写内容app.message 。这将导致页面上显示的标签发生变化。下面是它的外观。

应用研究

Vue还使开发人员能够为组件生命周期事件创建处理程序。这意味着我们可以侦听诸如created ， mounted和destroyed类的事件。当事件发生时，您可以组织一些代码的执行。我将不赘述，因为该材料的主要目的是演示创建Vue应用程序的各种方法，而不是分解框架的所有复杂性。但是，现在我们仍然看一下组件生命周期事件的处理方式，并在第一个应用程序上完成工作。

由于下面的代码， now变量的值将每秒更新一次。挂载Vue时，我们使用setInterval每秒设置一次函数调用以更新日期和时间。您可以通过向methods对象添加适当的方法来创建生命周期事件处理程序。这与我们处理data对象的方式非常相似。这是代码：

 <script>  const app = new Vue({    el: '#app',    data: {      message: 'Hello Vue!',      now: new Date()    },    methods: {      updateDate() {        this.now = new Date();      }    },    mounted() {      setInterval(() => {        this.updateDate();      }, 1000);    }  }) </script>

如果您在浏览器中打开此页面，则其外观不会改变，但是其上显示的时间将每秒更新一次。在这种情况下，我们不需要手动更新DOM。 Vue将数据链接到DOM。数据更改时，页面上显示的内容也会更改。

选项2：Vue CLI

尽管我们仅通过将Vue脚本连接到页面来创建应用程序，但是这种方法的可伸缩性不是很高。如果您需要开发功能完善的单页应用程序（单页应用程序，SPA），同时又想使用Vue辅助工具，那么最好使用Vue CLI。

如果您是不喜欢在命令行上工作的人之一，那么您可以很好地使用具有图形界面（Vue UI）的具有类似功能的工具。

V安装Vue CLI

首先，我们需要安装Vue CLI。在执行此操作之前，您需要获取Node.js和npm。如果您以前没有使用过Node.js和npm，请花一些时间来了解它们并有所了解。这是用于安装Vue CLI的命令：

 npm install -g @vue/cli

要创建新的应用程序，可以使用vue create命令。您可以使用vue -h命令找到vue支持的命令列表。

vue支持的命令列表

create命令接受应用程序的名称。通过运行以下命令来创建新的Vue应用程序：

 vue create hello-vue

在此命令期间，将在当前目录中创建一个新的hello-vue文件夹。关于使用vue create应用程序的过程的详细描述值得一单独的文章。

现在，我们已经同意默认设置。这将导致创建新的应用程序。

使用Vue CLI创建新的应用程序

现在转到hello-vue文件夹，打开位于src/components/HelloWorld.vue的文件，并将其所有内容替换为以下代码：

 <template>  <div class="hello">    <h1>{{ msg }}</h1>    <p>{{ now }}</p>  </div> </template> <script> export default {  name: "HelloWorld",  props: {    msg: String  },  data() {    return {      now: new Date()    };  },  methods: {    updateDate() {      this.now = new Date();     },  mounted() {    setInterval(() => {      this.updateDate();    }, 1000); }; </script>

请注意， msg中显示的文本值在src/App.vue 。

现在，在命令行或编辑器内置的终端中，运行以下命令：

 npm run serve

它将启动服务器，然后将提供有关如何打开应用程序开始页面的信息。即，这是http：// // localhost：8080 / 。

浏览器中的Vue应用程序

在这里，我们只是非常肤浅地检查了Vue CLI的使用。但是，我希望该示例向您展示使用Vue CLI创建具有可靠基础结构并可根据开发项目的不断增长的需求进行扩展的新应用程序有多么容易。

选项3：Vue用户界面

连同Vue CLI和命令行工具一起，还安装了Vue UI工具。为了启动它，请使用以下命令：

 vue ui

在执行过程中，将打开新应用程序的页面，该页面位于http：// localhost：8000 / dashboard 。

Vue用户界面页面

使用Vue UI，您可以创建一个新项目，该项目具有与使用命令行工具创建的项目相同的功能。

在Vue UI中创建新项目

完成项目设置后，您可以直接从Vue UI启动它，方法是转到“ Project tasks部分，然后单击相应的按钮。

在Vue UI中运行应用程序

选项4：CodeSandbox

尽管上述用于创建第一个Vue应用程序的选项使我们能够实现目标，但它们需要对开发环境进行一些配置。也许这不适合您，您仍然没有创建第一个Vue应用程序。如果是这样，那么我们现在将探讨使用Vue的另一种方法。它包括使用在线开发环境，其中之一是CodeSandbox 。

在CodeSandbox上创建项目之前，您需要在站点上注册或使用GitHub帐户登录。之后，您需要创建一个新的“沙盒”（在项目框架内称为“沙盒”），并在可用模板（在“ Popular templates或“ Client templates选项卡上）中找到Vue。

在CodeSandbox中创建一个基于Vue的新项目

之后，您将可以使用新的Vue应用程序。在下图中，您可以看到在左窗格中可以使用项目文件，在中心是编辑器窗口，在右边是显示工作应用程序的预览区域。

在CodeSandbox中处理应用程序

在编辑器中打开src/components/HelloWorld.vue文件，并将其内容替换为以下代码：

 <template>  <div class="hello">    <h1>{{ msg }}</h1>    <p>{{ now }}</p>  </div> </template> <script> export default {  name: "HelloWorld",  props: {    msg: String  },  data() {    return {      now: new Date()    };  },  methods: {    updateDate() {      this.now = new Date();     },  mounted() {    setInterval(() => {      this.updateDate();    }, 1000); }; </script>

之后，您将看到我们已经处理过的相同应用程序。在处理项目时，可能有必要将其显示给某人。例如，为了咨询一些东西。 CodeSandbox允许您使用特殊链接进行此操作。

在CodeSandbox中处理应用程序

有用的资源

这里是一些我最喜欢的Vue资源的链接。它们将帮助您在此框架的开发中前进。例如，这是Awesome Vue页面，通过访问该页面，您可以了解Vue生态系统的规模。在此处找到Vue存储库。这是官方项目博客。这是 Vue开发人员社区网站。您去了 -Vue播客。这是几个基于Vue的项目的页面： VuePress ， Nuxt ， Gridsome 。

接下来是什么？

无论您使用哪种框架来开发前端，都需要保持JavaScript状况良好。您可以花更多的时间来改善JS知识，这是更好的。如果您精通JavaScript，则意味着您可以处理可能需要使用的任何框架或任何库。

我已经从官方文档中谈到了 Vue 手册。但是值得再次提及。如果我是新手开发人员，我将尝试尽可能彻底地阅读本指南，然后阅读并重新阅读。但是同时，我不会忘记将在那里找到的那些代码示例付诸实践。难怪他们说重复是学习之母。重复在学习新技术的过程中起着重要的作用，您不能没有重复。

使用文档时，您应特别注意以下Vue基本概念：

组件。
数据绑定。
事件处理。
指令。
方法
计算的属性。
组件生命周期。
属性传递给组件。

现在不要努力创建大型应用程序。专注于掌握基本知识，其他所有事情都会随着时间的推移而出现。

总结

如果您在Twitter上关注我的帖子，那么您就会知道我是Vue的忠实粉丝。我喜欢构建基于组件的应用程序。我相信使用Vue不仅可以简化工作，而且可以使编写代码的过程令人愉悦而令人兴奋。

亲爱的读者们！ 如果您最近必须研究您的第一个客户框架，请告诉我们它的情况。

Vue.js入门所需的一切