创建第一个 Vue 3 项目

本教程将通过一个简单的文章搜索系统，一步步帮你构建一个自己的 Vue 3 项目。

以下是我们最后的成果。

如果你目前正在学习 Vue 3 项目开发，相信你一定兴奋起来了，现在让我们开始吧。

入门

将 Vue 3 添加到现有项目或自己创建 Vue 3 项目有若干不同的选项。

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

• Vue CLI
• Vite

Vue CLI

如果你以前搞过 Vue 开发，那么你一定用过 Vue CLI来设置项目。

Vue CLI 是 Vue 开发的命令行界面，是 Vue 生态系统的基线。所以，我们可以通过 Vue CLI 来创建 Vue app。

首先，你需要确定你拥有的是最新版本的 Vue CLI，这可以通过在终端运行npm update -g @vue/cli来完成。

接下来为了创建项目，运行vue create <PROJECT-NAME>。

如果你已成功更新 CLI，那么可以选择 Vue 3。

一旦选择 Vue 3 选项，就开始构建 app。完成后，我们只需要进入项目，然后运行 Vue app 即可。命令是：

cd <PROJECT-NAME>
npm run serve

现在，如果我们在浏览器中打开地址http://localhost:8080/，就可以看到app啦！

完美！

好的——再来看另一个创建 Vue 3 项目的选项。

Vite

Vite是一种新的 Vue 3 构建工具，在开发过程中使用 ES 模块导入来提供代码，而不是使用 Webpack 之类的工具进行捆绑。

Vite 由 Vue 的创建者构建，大大加快了开发开销，允许更快的热重载和更高效的冷服务器启动。

Vite 消除了捆绑过程，按需编译代码——这意味着仅编译影响当前屏幕的代码。所以你不必等捆绑了整个项目后再开始开发。

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

为什么要使用 Vue Vite？

现在你可能会问，“那么 Vite 与现有的 vue-cli 到底有什么不同？”

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

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

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

虽然通过 HTTP 请求处理导入可能会创建网络瀑布并且减慢速度。但由于此方法仅用于本地开发，因此这些差异一般可以忽略不计。

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

创建Vite项目

要使用 Vite，我们所要做的就是运行以下命令：

npm init vite-app <project-name>

然后，只需要进入项目文件夹，安装依赖项，然后使用以下命令运行 app 即可。

cd <project-name>
npm install
npm run dev

现在，如果我们打开地址http://localhost:3000，那么可以看到以下 app。

一些你应该知道的 Vue Vite 功能

1.将项目捆绑到生产环境

Vite 的目标是让 Vue 的开发和生产尽可能容易。虽然在开发期间没有捆绑，但真要将项目捆绑到生产也非常容易。

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

如果查看package.json，可以看到这调用了 vite build —— 与其他构建过程一样，将捆绑 Vue 项目并准备好dist文件夹以方便服务。

2.管理资源URL

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

• 绝对路径引用 —— 使用公共文件夹。资源通过/file.extension引用，并且会在项目构建时复制到dist文件夹的根目录。
• 相对路径引用 —— 例如，src/assets文件夹中的文件是根据文件夹的文件结构相对访问的。构建项目时，整个文件夹作为_assets放置在dist文件夹中。

3.内置TypeScript支持

Vue 3 最大的变化之一是使用 TypeScript 重写了核心库 —— 允许根据 IDE 进行类型检查和更优化的错误消息。

并且，Vue Vite 通过为.ts文件和 SFC 中的<script lang="ts">提供内置的 TypeScript 支持，顺利完成了与 Vue 3 的集成。

了解Vue 3组件

现在我们已经设置完了 Vue 3 app，并且了解了 Vue 3 Vite 工具，接下来让我们来看看组件是如何工作的。

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

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

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

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

所以如果你更习惯 Vue 2 语法的话，我们仍然可以在 Vue 3 中使用旧语法。

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

Composition API 中的响应式数据

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

import { ref } from "vue";

然后用一个看起来像这样的setup函数替换数据选项。

import { ref } from "vue";
export default {
  setup() {
    return {};
  },
};

这个setup方法在组件创建时运行，我们可以在这里定义我们希望组件使用的所有响应式数据、计算属性、方法等。

然后，这个setup方法返回的任何东西都可以在模板中访问！

使用 ref 创建响应式数据

为了展示这一点，首先我们在模板中使用v-model创建文本输入框。

<template>
  <div>
    <h2>Filter LearnVue Articles</h2>
    <input type="text" placeholder="Filter Search" v-model="query" />
    {{ query }}
  </div>
</template>

使用ref创建响应式query变量，然后从setup方法中返回query。

export default {
  setup() {
    const query = ref("");

    return {
      query,
    };
  },
};

然后，如果我们返回到 app，你会看到我们使用 Composition API 获得了响应式数据。

太棒了！

接下来，让我们为输入框添加clear按钮，以及看看如何在 Composition API 中创建方法。

Composition API中的方法

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

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

在 Composition API 中，一切都放置在setup方法中意味着我们可以根据功能组织代码，甚至可以将公共功能提取到各自的代码模块中。

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

export default {
  setup() {
    const query = ref("");

    const reset = (evt) => {
      query.value = ""; // clears the query
    };

    return {
      reset,
      query,
    };
  },
};

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

为什么呢？

如果我们使用console.log(query)，那么我们会看到它不是一个字符串值，而是一个Proxy。代理陷阱允许我们轻松获取数据，这也是我们需要在ref上调用.value的原因。

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

<button @click="reset">Reset</button>

现在，应用程序看起来应该像这样。

添加第二个组件

有了输入和query数据，现在我们就来实际创建一个results组件并开始显示结果。

我们将其命名为SearchResults.vue

为了将这个组件添加到HelloWorld.vue代码，我们首先必须导入它并在export default中声明。

<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组件中的query字符串。

传递 props

Vue props 允许父组件将数据传递给子组件。在本文的示例中，我们希望将query字符串从HelloWorld.vue传递给SearchResults.vue

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

是不是很简单！

访问 props

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

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

然后，通过几个步骤来访问 props。

首先，我们必须在 props 选项中进行声明。即告诉组件我们期望什么 props 并执行指定的 prop 验证。

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

仔细查看setup方法，你会发现它接受两个参数。

• props：包含所有传递给组件的 props
• context：包含属性、插槽和 emit

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

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

计算属性

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

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,
    };
  },
};

对于此方法，我们希望使用查询 prop 过滤所有标题。一切都会转换为小写，所以不必担心大小写的问题。

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

剩下要做的就是使用模板来显示数据！这将通过v-for循环完成。

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

就是这样。

现在来看看我们最终的成果。

Vue 3 项目中的生命周期钩子

在开始使用 Vue 3 之前，你应该知道的另一件事是如何使用 Vue 生命周期钩子。

与 Composition API 的其他部分一样，我们必须导入想要使用的生命周期钩子并在setup方法中进行声明。

下面是一个关于如何使用生命周期钩子的示例。

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

结束语

Vue 3 有许多很酷的功能，对于创建可扩展的 Vue app非常有用。

希望本教程能帮助你在新环境中完成设置，并为你提供创建 Vue 3 项目的基础知识。

编码快乐！感谢大家的阅读。