第 2部分：Vue 入门

我会带着你远行 2024-03-16 13:03 53阅读 0赞

您将在本文中了解 vue 基础知识以及它们的工作原理，如果您在理解此处解释的任何概念时遇到困难，请参阅文档。本文仅基于 Vue 2，因为大多数代码库仍然是 Vue 2 代码库。但是，我打算在本系列中添加一个额外内容，解释如何将 Vue 2 应用程序迁移到 Vue 3 应用程序。

什么是 vue js 以及为什么要使用它？

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它旨在逐步采用，这意味着开发人员可以将其集成到现有项目中或将其用于新项目。Vue.js 以简单、易用和灵活着称。

反应性是 Vue.js 的主要优势之一；它允许对数据所做的更改自动更新用户界面。因此，开发人员可以创建更复杂和动态的应用程序，而不必担心手动更新 DOM。

此外，Vue.js 具有易于管理的学习曲线，使其成为所有经验水平的开发人员的绝佳选择。它还拥有一个规模庞大且充满活力的社区，可提供多种服务和帮助。

设置你的开发环境？

首先，您的 PC 上是否安装了 Vue？（个人计算机）如果是，那太好了！如果还没有，请不要惊慌。这是vue 文档中关于如何安装 vue js 的指南。

创建你的第一个 VueJS 应用程序

//There's no need to add the square bracket.
    vue create [name-of-project]

在您的终端上运行上面的代码，系统会提示您几个问题，询问您更喜欢哪种方法来创建应用程序。我建议您使用手动安装，以便更好地选择需要什么和不需要什么。  
完成上述步骤后，您应该创建项目。

cd [name-of-project]

CD 进入项目并在您喜欢的 IDE 中打开它。  
惊人的！您已经创建了第一个 Vue 应用程序。

了解组件及其在 Vue.js 中的作用

组件背后的想法是为应用程序创建模块化和可重用的功能。如果你不明白，这里打个比方。  
以拥有超过 10,000 本书但没有任何适当组织的学校图书馆为例。从您选择的作者那里得到一本书将是累人和乏味的。

这就是分段的用武之地。图书馆中的分段目录是一种将图书馆的馆藏组织成更小、更易于管理的组的方法。从本质上讲，它涉及根据一组特定的标准将图书馆的馆藏分解成更小的部分或类别。这可以通过将搜索范围缩小到特定部分来帮助用户更轻松地找到他们正在寻找的书籍。  
现在将您的细分市场作为一个组成部分；这用于将大型应用程序分解为模块化或更小的部分。这将帮助您有效地管理您的应用程序。现在您已经了解了组件的含义，让我们看看为它创建一个示例。

要使用 Vue CLI 创建组件，您可以按照以下步骤操作：

导航到src/components项目目录中的文件夹。  
为您的组件创建一个新的 .vue 文件，例如 MyComponent.vue。  
在 MyComponent.vue 文件中，使用 Vue 单文件组件语法为您的组件定义模板、脚本和样式。  
例如，一个简单的 MyComponent.vue 文件可能如下所示

<template>
       <div>
          <h1>{
       
        {
       
         name }}</h1>
          <p>{
       
        {
       
         email }}</p>
       </div>
    </template>
    
    <script>
    export default {
       
        
      name: 'MyComponent',
      data() {
       
        
          return {
       
        
             name: 'Makanju Emmanuel',