从零开始的Vue3学习之旅：让你一步到位成为前端专家

Vue.js 是一个流行的 JavaScript 前端框架，它提供了响应式数据绑定和组件化开发的功能，使得构建复杂的单页应用程序变得更加简单。Vue.js 3 是最新的版本，它带来了一些新特性和改进，包括更小的体积、更好的性能和更多的功能。

以下是一个简单的 Vue.js 3 入门教程：

1. 安装 Node.js

首先需要安装 Node.js，可以从官网（https://nodejs.org/）下载对应的版本进行安装。

2. 创建一个新的文件夹并进入该文件夹

在本地创建一个名为 my-vue3-app 的文件夹，并在命令行中进入该文件夹：

mkdir my-vue3-app
cd my-vue3-app

3. 初始化项目

在命令行中输入以下命令来初始化项目：

npm init -y

这将生成一个 package.json 文件，用于管理项目的依赖和配置。

4. 编写代码

在命令行中输入以下命令来创建一个新的 JavaScript 文件 App.vue：

touch App.vue

然后使用文本编辑器打开该文件，并输入以下代码：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3!');
    function changeMessage() {
      message.value = 'Hello, World!';
    }
    return { message, changeMessage };
  },
};
</script>

这段代码创建了一个简单的组件，包含一个标题和一个按钮。标题显示了一个消息，按钮点击时会改变消息内容。我们使用了 ref 函数来创建响应式数据，并使用了 setup 函数来组织组件的逻辑。最后，我们将 message 和 changeMessage 返回，以便在模板中使用。

5. 运行代码

在命令行中输入以下命令来运行代码：

npm run serve

然后在浏览器中访问 http://localhost:8080/，应该可以看到 "Hello, Vue 3!" 消息和一个 "Change Message" 按钮。点击按钮后，消息内容会改变为 "Hello, World!"。