likes
comments
collection
share

创建你的第一个 Vue3 项目——Vue 教程在本 Vue3 教程中，我们将构建一个搜索系统，该系统使用文本输入从数组中

作者站长头像
站长
· 阅读数 17

Vue3 不知不觉已经来了2-3年了，出个教程吧~为了jym更好的找工作，也为了自己。

开发人员长期以来一直在等待[Vue3 宣布的真正牛叉的功能]例如 Typescript 支持、大型项目的更好组织以及为更好的 Vue 应用程序打造的渲染优化。

在本 Vue3 教程中，我们将构建一个搜索系统，该系统使用文本输入从数组中过滤文章。

在本教程结束时，您将创建一个 Vue3 项目，并使用 Composition API 构建两个组件。

接下来是将要实现的功能

创建你的第一个 Vue3 项目——Vue 教程在本 Vue3 教程中，我们将构建一个搜索系统，该系统使用文本输入从数组中

这是已完成的代码库（包括所有 CSS 样式）的链接。

好吧，我相信你和我一样兴奋，所以让我们开始编码吧。

入门

将 Vue3 添加到您现有的项目或创建您自己的 Vue3 项目有几个不同的选项。

在本教程中，我们将介绍我个人最喜欢的两个选项：

  1. Vue CLI
  2. Vite

Vue CLI

如果您过去做过 Vue 开发，您可能已经使用Vue CLI来设置您的项目。

Vue CLI 是用于 Vue 开发的命令行界面，作为 Vue 生态系统的基线。对于我们的案例，它允许我们创建一个 Vue 应用程序。

首先，我们必须确保我们拥有最新版本的 Vue CLI，我们可以通过在终端中运行来做到这一点。

接下来，要创建我们的项目，我们要运行vue create <PROJECT-NAME>

如果我们成功更新了 CLI，我们应该可以选择 Vue3。

创建你的第一个 Vue3 项目——Vue 教程在本 Vue3 教程中，我们将构建一个搜索系统，该系统使用文本输入从数组中 一旦我们选择了 Vue3 选项，我们的应用程序就应该构建了。完成后，我们只需要进入我们的项目，然后运行我们的 Vue 应用程序！其命令是： 
cd <PROJECT-NAME> 
npm run serve

现在，如果我们在浏览器中导航到我们的应用程序http://localhost:8080/，我们应该会看到我们的应用程序！

创建你的第一个 Vue3 项目——Vue 教程在本 Vue3 教程中，我们将构建一个搜索系统，该系统使用文本输入从数组中

可以了！

下面——让我们看一下创建 Vue3 项目的另一种选择。

Vite

Vite（发音类似“veet”）是一种新的 Vue3 构建工具，它在开发过程中使用 ES 模块导入服务代码，而不是使用 Webpack 等工具进行打包。

由 Vue 的创建者构建，它大大加快了开发速度，允许更快的热更新和更高效的冷服务启动。

Vite 消除了捆绑过程，只按需编译代码——这意味着只编译当前影响当前屏幕的代码。这意味着您不必等待整个项目被捆绑后即可开始开发。

由于捆绑大型项目可能需要很长时间，因此 Vite 具有加快开发过程的巨大潜力。

为什么要使用 Vue Vite？

现在您可能会问自己， “那么 Vite 与现有的 vue-cli 究竟有何不同？”

由于@vue-cli/service构建在 webpack 之上，它是一个模块打包器，将在启动、热重载和编译时打包你的整个 Vue 项目。

取而代之的是，Vue Vite 将在您的代码中采用 ES Import 语法，让浏览器解析导入并为每个导入发出 HTTP 请求。

Vue Vite 在开发过程中提供比基于捆绑器的解决方案更快的启动、热重载和编译速度。

假设地，通过 HTTP 请求处理导入可能会产生网络瀑布并且速度会变慢。但由于此方法仅适用于本地开发，因此这些差异应该可以忽略不计。

此外，正如我们稍后将讨论的那样，将您的 Vite 项目打包用于生产并完全避免此问题非常简单。

创建你的第一个 Vite 项目

要开始使用 Vite，我们所要做的就是运行

npm init vite-app <项目名称>

然后，我们只需要进入我们的项目文件夹，安装我们的依赖项，然后使用以下命令运行我们的应用程序

cd <项目名称> 
npm install 
npm run dev

现在，如果我们导航到http://localhost:3000- 我们应该会看到下面这个应用程序。

创建你的第一个 Vue3 项目——Vue 教程在本 Vue3 教程中，我们将构建一个搜索系统，该系统使用文本输入从数组中

你应该知道的一些 Vue Vite 特性

1 — 捆绑您的项目以进行生产

Vite 的一个目标是让 Vue 的开发和生产尽可能简单。虽然在开发期间没有捆绑，但捆绑您的项目以进行生产非常容易。

您所要做的就是运行npm run build。

如果我们查看package.json，我们会看到这是调用vite build- 与其他构建过程一样，它将捆绑您的 Vue 项目并准备要提供的 dist 文件夹。

创建你的第一个 Vue3 项目——Vue 教程在本 Vue3 教程中，我们将构建一个搜索系统，该系统使用文本输入从数组中

2 — 管理 URLS

与其他 Vue 项目设置一样，Vite 提供了两种引用资产的方式。

  1. 绝对 - 使用公用文件夹。这些资产使用 /file.extension 引用 ， 并会在构建项目时复制到 dist 文件夹的根目录。
  2. 相对——例如，src/assets 文件夹中的文件是根据文件夹的文件结构进行相对访问的。_assets构建项目时，整个文件夹将放置在 dist 文件夹中

创建你的第一个 Vue3 项目——Vue 教程在本 Vue3 教程中，我们将构建一个搜索系统，该系统使用文本输入从数组中

3 — 内置 Typescript 支持

Vue3 中最大的变化之一是使用 Typescript 重写了核心库——允许类型检查和更好的错误消息，具体取决于您的 IDE。

再一次，Vue Vite 通过为 .ts 文件和 SFC 中的文件提供内置的 Typescript 支持，与 Vue3 顺利集成<script lang="ts">。

了解 Vue3 组件

现在我们已经设置了 Vue3 应用程序并且了解了 Vue3 Vite 工具，让我们来看看组件是如何工作的。

Vue3 最大的变化是引入了 Composition API。在这个新结构中，我们能够按功能组织我们的代码，而不是只能按数据、计算等来分离代码。

这使我们能够创建更加模块化、可读性和可扩展性更高的代码，因为单个功能的代码都可以写在我们代码的一个区域中。

创建你的第一个 Vue3 项目——Vue 教程在本 Vue3 教程中，我们将构建一个搜索系统，该系统使用文本输入从数组中

如果我们打开src/components/HelloWorld.vue文件，我们可以看到看起来与我们在 Vue2 中编写的代码相同的代码——这称为 Options API。

<script> 
export default { 
  name: 'HelloWorld', 
  props: { 
    msg: String 
  }, 
  data() { 
    return { 
      count: 0 
    } 
  } } 
< /script>

这很棒，因为它展示了我们如何仍然可以在 Vue3 中使用“旧”语法（如果您更习惯的话）。

在本教程中，我们将介绍如何在新的 Composition API 中实现这一点，并确定 Options API 中的更改。

Composition API 中的反应式数据

在我们的 SFC 的脚本部分，让我们首先从 vue 核心库中导入一些东西，以允许我们创建反应变量。

    import { ref } from 'vue'

然后，让我们用看起来像这样的设置函数替换我们的数据选项。

import { ref } from 'vue' 
  export default { 
    setup () { 
      
      return { 
       
      } 
    } 
  }

此设置方法在我们的组件创建时运行，我们可以在其中定义我们希望组件使用的所有反应数据、计算属性、方法等。

然后，此设置方法返回的任何内容都可以在我们的模板中访问！

使用 ref 创建响应式数据

为了展示这一点，让我们使用v-model我们的模板内部创建一个文本输入。

<template> 
   <div> 
     <h2> 过滤 LearnVue 文章 </h2> 
     <input 
      type='text' 
      placeholder='Filter Search' 
      v-model='query' 
    /> 
    {{ query }} 
   </div> 
</template >

添加个query使用 ref 创建我们的反应变量，然后从我们的设置方法中返回它。

setup () { 
      const query = ref('') 

      return { 
        query 
      } 
}

然后，如果我们回到我们的应用程序，您会看到我们有使用 Composition API 的反应数据。

为简单起见，我没有包括本文中的所有样式，但如果您想查看我使用的样式，可以查看教程Github 。

创建你的第一个 Vue3 项目——Vue 教程在本 Vue3 教程中，我们将构建一个搜索系统，该系统使用文本输入从数组中

牛X！

接下来，让我们在输入中添加一个清除按钮，看看如何在 Composition API 中创建一个方法。

Composition API 中的方法

在 Options API 中，我们的 Vue 对象中有一个完整的属性专门用于方法。

对于较大的文件，这意味着可以在距离使用它的方法数百行之外声明数据——使组件更难阅读和维护。

在 Composition API 中，一切都在设置方法中，这意味着我们可以根据特性组织代码，甚至可以将公共特性提取到自己的代码模块中。

让我们创建一个重置方法，它接受我们的 ref 并将其设置为一个空字符串。

setup () { 
      const query = ref('') 

      const reset = (evt) => { 
        query.value = '' // 清除查询
      } 
      
      return { 
        reset, 
        query 
      } 
}

需要注意的一件事是我们需要调用query.value才能访问数据的值。

为什么？

如果我们console.log(query)，我们会看到它不仅仅是一个 String 值，而是一个Proxy。代理中的陷阱使我们能够轻松获取数据，但这就是为什么我们需要在我们的 refs 上调用 .value 的原因。

然后，就像在 Options API 中一样，我们可以在模板中添加一个按钮，以便reset在单击时调用此方法。

<button @click='reset'>reset</button>

现在，当我们使用新的清晰输入代码检查我们的应用程序时，它应该看起来有点像这样。

创建你的第一个 Vue3 项目——Vue 教程在本 Vue3 教程中，我们将构建一个搜索系统，该系统使用文本输入从数组中

向我们的 Vue3 项目添加第二个组件

现在我们有了输入和查询数据，让我们实际创建一个结果组件并开始显示我们的结果。

我们称它为SearchResults.vue

要将其添加到我们的HelloWorld.vue代码中，我们首先必须导入它并在我们的导出默认值中声明它。

<script>
    import { ref } from 'vue'  
    import SearchResults from './SearchResults.vue'  
    export default {  
        components: {  
            SearchResults  
        },  
        // ...  
    }
<script>

然后，我们可以像这样将它添加到我们的模板中.

<template>  
    <div>  
        <h2> Filter LearnVue Articles </h2>  
        <input  
        type='text'  
        placeholder='Filter Search'  
        v-model='query'  
        />  
        <br>  
        <button @click='reset'>reset </button>  
        <search-results/>  
    </div>  
</template>

可以，接下来让我们找到一种方法来使用 HelloWorld 组件中的查询字符串。

props

Vue props 允许父组件将数据传递给它的子组件。对于我们的案例，我们希望将我们的查询字符串从 HelloWorld.vue 传递到 SearchResults.vue

我们可以通过在 HelloWorld.vue 的标签内添加一个属性来做到这一点<search-result>。

<search-results :query='query'/>  <!--是吧？easy-->

使用props

在 SearchResults.vue 中，让我们创建脚本的框架并从 JSON 文件导入所有文章信息。

import titles from '../post-data.json' 
export default { 
  setup (props, context) { 
 
  } 
}

然后，我们需要几个步骤来访问道具。

首先，我们必须在道具选项中声明它们。这告诉我们的组件期望什么 props 以及执行我们指定的任何 prop 验证。

export default { 
  props: { 
    query: String 
  }, 
  setup (props, context) { 
  // ...

如果仔细查看设置方法，您会发现它接受两个参数。

  1. props- 包含传递给我们组件的所有道具
  2. context- 包含属性、插槽和发射

我们将使用 props 来访问 setup 方法中 props 的值。

我们需要做的就是使用计算属性来使用我们的查询属性来过滤文章列表。

计算属性

与使用 ref 类似，我们需要将 computed 导入到我们的项目中。

import { computed } from 'vue'

然后，我们像这样设置它，我们的计算属性接受一个 getter 方法。只要其中一个依赖项发生变化，此方法就会更新我们的计算属性。

import { computed } from 'vue' 
import titles from '../post-data.json' 
export default { 
  props: { 
    query: String 
  }, 
  setup (props, context) { 
    
    const filteredTitles = computed(() => { 
     
    } )

    return { 
      filteredTitles 
    } 
  } 
}

对于此方法，我们要使用 query 属性过滤所有标题。一切都被转换为小写，所以我们不必担心大小写。

const filteredTitles = computed(() => { 
      return titles.filter(s => s.Name.toLowerCase().includes(props.query.toLowerCase())) } 
)

OK！

剩下要做的就是实际使用我们的模板来显示数据！这是使用v-for循环完成的。

<template> 
  <div class='root'> 
    <p> {{ query }}- {{ filteredTitles.length }} </p> 
    <ul> 
      <li v-for='title in filteredTitles' : key='title.Page'> 
        {{ title.Name }} 
      </li> 
    </ul> 
  </div> 
</template>

OK。最后让我们看看我们现在做了什么，再次单击此处以获取我用于此组件的确切 CSS 样式。

创建你的第一个 Vue3 项目——Vue 教程在本 Vue3 教程中，我们将构建一个搜索系统，该系统使用文本输入从数组中

Vue3 项目中的生命周期挂钩

在开始使用 Vue3 之前您应该了解的另一件事是如何使用[Vue 生命周期钩子]。

创建你的第一个 Vue3 项目——Vue 教程在本 Vue3 教程中，我们将构建一个搜索系统，该系统使用文本输入从数组中

与 Composition API 的其他部分一样，我们必须导入要使用的生命周期挂钩，并在设置方法中声明它们。

下面是一个如何使用生命周期挂钩的简单示例。

import { computed, onMounted } from 'vue' 
export default { 
  setup () { 
    
    onMounted(() => { 
      console.log('mounted') 
    }) } 
  }

总结

Vue3 中有很多很酷的特性，它们应该对创建可扩展的 Vue 应用程序非常有用。

希望本教程能让您在新环境中进行设置，并为您提供开始创建自己的 Vue3 项目的基础知识。

和往常一样，如果您有任何意见或问题，请留下回复。

祝你编码愉快！每天一个小知识

转载自:https://juejin.cn/post/7222092486667845693
评论
请登录