如何在 Vue 版本 3 中运行 Vue.js Hello World 应用程序

介绍

Vue.js 是一个流行的 JavaScript 框架，用于构建交互式和动态的用户界面。Vue 3 是最新的版本，具有更强大的性能和功能。

在本篇文章中，我们将介绍如何在 Vue 3 中运行 “Hello World” 应用程序，这是一个简单的示例应用程序，以帮助你开始学习 Vue.js。

前置条件

在开始本教程之前，您应该已经安装了以下软件：

• Node.js（官网：https://nodejs.org）
• Vue CLI（您可以使用 npm 安装它：npm install -g @vue/cli）

步骤

下面是您可以按照的步骤来创建和运行 “Hello World” 应用程序。

创建一个新项目

首先，让我们使用 Vue CLI 创建一个新项目。

1. 运行以下命令来创建一个新的 Vue 3 项目：

vue create hello-world

2. 选择默认选项来创建项目。

将 Hello World 页面添加到项目中

接下来，我们将添加一个简单的 Hello World 页面。

1. 在您的项目中打开 src/App.vue 文件，并将以下代码添加到文件中：

<template>
  <div>Hello World!</div>
</template>

2. 然后，打开 src/main.js 文件，并将以下代码添加到文件中：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

运行应用程序

最后，让我们运行应用程序并验证它是否可以工作正确。

1. 打开终端，进入您的新项目的目录。

2. 运行以下命令以启动开发服务器：

npm run serve

3. 在浏览器中打开以下链接，以预览您的应用程序：http://localhost:8080/

现在，您应该可以看到 “Hello World!” 字符串显示在屏幕上了。

总结

恭喜！您已经成功创建了您的第一个 Vue 3 应用程序。这只是一个简单的示例，但您可以利用Vue.js的强大功能来创建更复杂和精美的应用程序。希望这篇文章能帮助您更轻松地开始使用 Vue.js。