5 从零到上手学习 Vue.js 框架教程
小节：创建第一个 Vue.js 应用
在本小节中，我们将一步步创建一个简单的 Vue.js 应用。通过这个练习，您将深入了解 Vue.js 的基础知识和工作流程。
1. 安装 Node.js 和 npm
在开始之前，请确保您的计算机上已安装 Node.js 和 npm（Node.js 的包管理器）。可以通过以下命令检查版本：
1 | node -v |
如果尚未安装，请访问 Node.js 官方网站 下载并安装最新版本。
2. 创建新项目
选择一个合适的文件夹进行项目创建。在命令行界面（CLI）中，使用以下命令创建一个新的项目文件夹：
1 | mkdir my-vue-app |
3. 初始化项目
在项目文件夹中，使用 npm init 命令初始化项目。这将创建一个新的 package.json 文件，提供关于项目的基本信息：
1 | npm init -y |
-y 参数用于接受所有默认选项。
4. 安装 Vue.js
接下来，我们需要安装 Vue.js。使用 npm 安装最新的 Vue.js 版本：
1 | npm install vue |
5. 创建 HTML 文件
在项目根目录下，创建一个 index.html 文件，并将以下基本结构添加到该文件中：
1 |
|
在此示例中，我们创建了一个带有一个 div 元素的基本 HTML 页面。这个 div 的 id 是 app，它是 Vue.js 应用的挂载点。
6. 创建 Vue 应用
在项目根目录下，创建一个名为 app.js 的 JavaScript 文件，并在其中添加以下代码：
1 | const app = new Vue({ |
这里我们创建了一个新的 Vue 实例，并指定 el 为 #app，这代表 Vue.js 实例将控制 id 为 app 的 DOM 元素。data 对象包含了一个属性 message，它将在 HTML 中显示。
7. 运行应用
为了查看我们创建的 Vue.js 应用，您需要在浏览器中打开 index.html 文件。可以直接用浏览器打开这个文件，或者在终端中使用一个简单的本地服务器来托管它。例如，您可以使用 Live Server 插件（如果您使用的是 Visual Studio Code）或安装 http-server：
1 | npm install -g http-server |
然后在项目文件夹中启动服务器：
1 | http-server |
在浏览器中访问 http://localhost:8080（具体端口可能有所不同），您应该能够看到页面上显示“你好，Vue.js！”的消息。
8. 总结
通过以上步骤，您已经成功创建了一个简单的 Vue.js 应用。在这个应用中，我们学习了如何：
- 初始化一个 Node.js 项目。
- 安装 Vue.js。
- 创建基本的 HTML 结构。
- 使用 JavaScript 创建 Vue 实例并进行数据绑定。
接下来，您可以尝试添加一些交互性，比如使用按钮来更新 message 的内容，或者探索更多 Vue.js 的特性，如组件、指令等。
9. 下一步
在下一节，我们将深入探讨 Vue.js 的组件系统，以及如何在应用中使用组件来结构化和组织代码。
5 从零到上手学习 Vue.js 框架教程
