Vue 3 快速入门 (一)：环境配置与搭建

Vue.js 是一款非常流行的前端 JavaScript 框架，它适用于构建用户界面和单页应用（SPA）。随着 Vue 3 的发布，更多的特性和改进使其更加高效和易用。在这篇文章中，我们将介绍如何搭建 Vue 3 开发环境，并创建一个简单的应用。

1. 环境准备

要开始使用 Vue 3，我们需要确保开发环境中已安装 Node.js。Node.js 是一个 JavaScript 运行时，Vue CLI 需要它来创建和管理 Vue 项目。

安装 Node.js

可以在 Node.js 官网 下载并安装适合你操作系统的版本。安装完成后，可以使用以下命令检查 Node.js 和 npm（Node.js 的包管理器）是否成功安装：

node -v
npm -v

如果命令行返回了版本号，说明安装成功。

2. 安装 Vue CLI

Vue CLI 是 Vue.js 官方提供的一个命令行工具，能够帮助我们快速搭建 Vue 项目。在终端中运行以下命令来全局安装 Vue CLI：

npm install -g @vue/cli

安装完成后，可以通过以下命令来检查 Vue CLI 是否安装成功：

vue --version

3. 创建 Vue 3 项目

我们接下来可以使用 Vue CLI 创建一个新的 Vue 3 项目。在终端中运行以下命令，并替换 my-vue-app 为你希望的项目名称：

vue create my-vue-app

在创建过程中，Vue CLI 会询问你一些选项。在这里，选择 “Default” 预设（包含 Babel 和 ESLint），然后等待安装完成。

完成安装后，进入项目目录：

cd my-vue-app

4. 运行开发服务器

接下来，我们可以启动开发服务器，以便在本地预览应用。在项目目录下，运行以下命令：

npm run serve

命令运行后，你会看到类似以下的输出：

App running at:
- Local:   http://localhost:8080/
- Network: use --host to expose

在浏览器中访问 http://localhost:8080/，你将看到一个默认的 Vue 应用界面。

5. 创建一个简单的组件

现在我们来创建一个简单的 Vue 组件。打开 src/components 目录，创建一个新的文件 HelloWorld.vue，并在里面写入以下代码：

<template>
  <div>
    <h1>欢迎使用 Vue 3!</h1>
    <p>这是一个简单的组件示例。</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

接下来，打开 src/App.vue 文件，并在文件中引入刚刚创建的组件：

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

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

保存文件后，浏览器中的页面会自动刷新，你将看到新创建的组件内容。

6. 总结

在本文中，我们成功设置了 Vue 3 的开发环境，并创建了一个简单的应用和组件。接下来的学习中，我们可以探索 Vue 3 的更多特性，比如组合 API、路由管理、状态管理等。这些特性将进一步丰富我们的应用开发体验。希望你能在使用 Vue 3 的旅程中，收获满满！