Vue3 安装学习笔记

Vue.js 是一个渐进式的 JavaScript 框架，具有简单、灵活、高效的特点。Vue 3 是最近发布的版本，它拥有更好的性能和更好的 TypeScript 支持。在本文中，我们将探讨如何安装 Vue 3 并开始学习。

安装 Node.js

Vue 3 是一个基于 Node.js 的框架，因此首先需要安装 Node.js。你可以从 Node.js 官网 下载并安装最新版本的 Node.js。

创建 Vue 3 项目

在安装完 Node.js 后，我们可以使用 Vue CLI 来创建 Vue 3 项目。Vue CLI 是一个 CLI 工具，可快速创建和管理 Vue 项目。打开终端并运行以下命令：

shCopy Code
npm install -g @vue/cli

这将全局安装 Vue CLI。安装完成后，我们可以使用以下命令来创建新的 Vue 3 项目：

shCopy Code
vue create my-project

my-project 是你的项目名称，请根据实际情况进行更改。接下来，Vue CLI 将会提示你选择一个预设。你可以选择默认值（即 default）或手动选择所需的选项。选择完成后，Vue CLI 将生成一个新的 Vue 3 项目。

运行 Vue 3 项目

要运行 Vue 3 项目，请进入项目目录并运行以下命令：

shCopy Code
cd my-project
npm run serve

这将启动一个开发服务器，并将应用程序运行在 http://localhost:8080 上。现在你可以在浏览器中打开该网址，即可看到你的 Vue 3 应用程序正在运行。

实例

下面是一个简单的例子，演示如何在 Vue 3 中创建一个组件：

htmlCopy Code
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      title: 'Welcome to MyComponent',
      message: 'This is a Vue 3 component',
    };
  },
};
</script>

在上面的代码中，我们创建了一个名为 MyComponent 的 Vue 组件。该组件具有一个数据对象，其中包含两个属性：title 和 message。我们可以在模板中使用双花括号语法来绑定数据，并将其显示在页面上。

这是一个简单的例子，但它演示了 Vue 3 的一些基本概念和语法。通过阅读官方文档并尝试编写自己的应用程序，你可以进一步探索 Vue 3 并将其用于实际项目中。