十分钟 Vite + Vue 3 项目实战教程-51CTO.COM

本Vue 3教程将介绍如何构建一个简单的搜索模块，该模块使用文本输入过滤数组中的文章。

也就是说，在创建这个Vue 3项目的过程中，我们需要使用Composition API构建两个组件。

我们的目标是这样的：

是不是很有意思呢？事不宜迟，让我们开始编码吧。

开始

我们可以有很多种方法将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，那就可以选择Vue3。

一旦我们选择了Vue 3选项，就会构建app了。完成构建后，我们只需要进入项目，然后运行Vue app！其命令是：

cd <PROJECT-NAME>
npm run serve

现在，如果我们在浏览器中导航到http://localhost:8080/，就能看到app了！

完美！

那么另一个创建Vue 3项目的途径是怎么做呢？

Vite

Vite是一个新的Vue 3构建工具，它在开发过程中使用ES Module导入来提供代码，而不是使用webpack等工具捆绑。

Vite由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 create vite@latest

然后，只需进入项目文件夹，安装依赖项，然后使用以下命令运行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. 管理网址

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

绝对路径引用 – 使用公用文件夹。这些资源使用/_file.extension_引用，并将在构建项目时复制到dist文件夹的根目录。
相对路径引用 – 例如，根据文件夹的文件结构相对访问src/assets文件夹中的文件。生成项目时，整个文件夹将作为_assets放置在dist文件夹中。

3. 内置TypeScript支持

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

Vue Vite也可以与Vue 3集成，为.ts文件和SFC中的TypeScript<script>提供内置的TypeScript支持。

了解 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 3中使用“旧的”语法。

本教程接下来还将介绍如何在新的Composition API中执行此操作，并确定Option API的更改。

Composition API中的响应式数据

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

import { ref } from 'vue'

然后，用如下所示的setup函数替换原来的data选项。

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创建响应式查询变量，然后从setup方法返回。

export default {
  setup() {
    const query = ref('')
    return {
      query,
    }
  },
}

好的，现在如果我们回到app，就可以看到使用Composition API的响应式数据。

是不是很赞？

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

Composition API中的方法

在Option 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对象。Proxy中的陷阱使我们能够轻松获取数据，但这也恰恰就是为什么我们需要在ref调用.value的原因。

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

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

现在，当我们使用新的输入框代码构建应用程序时，将如下所示。

为Vue 3项目添加第二个组件

有了输入和查询数据的组件，不妨实际创建一个results组件来显示结果。

我们将其命名为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" />

超级简单吧！

访问props

让我们在SearchResults.vue中创建组件的主结构代码，并从JSON文件中导入所有文章信息。

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

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

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

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

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

props – 包含传递给组件的所有参数
context – 包含attrs、slots和emit。

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

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

计算属性

与使用ref类似，也需要导入到项目中。

import { computed } from 'vue'

然后像这样设置它，其中的计算属性接受getter方法。只要有依赖项更改，这个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 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非常有用。看完本教程，有没有兴趣自己动手试试看呢？