第1篇：Vue简介与开发环境搭建

什么是 Vue.js？

Vue.js 是一款轻量级的前端框架，用于构建用户界面。它采用 数据驱动 的方式，通过简单直观的语法，让开发者能够快速上手。

Vue 的特点

• 简单易学： 语法简单，适合初学者入门。
• 高效灵活： 支持组件化开发，代码复用率高。
• 轻量快速： 体积小，运行速度快。
• 渐进式框架： 可以逐步引入，灵活适配项目需求。

Vue 的应用场景

• 单页面应用（SPA）
• 中小型项目的前端开发
• 移动端页面
• 组件化开发场景

搭建 Vue 开发环境

1. 安装 Node.js 和 npm

Vue 的开发需要依赖 Node.js 和 npm。

步骤：

1. 下载 Node.js： 访问 Node.js 官方网站，下载适合你操作系统的版本。
2. 检查安装是否成功：

node -v
npm -v

2. 安装 Vue CLI

Vue CLI 是 Vue 提供的命令行工具，可以快速搭建 Vue 项目。

安装命令：

npm install -g @vue/cli

检查是否安装成功：

vue --version

3. 创建第一个 Vue 项目

1. 创建项目：

vue create my-first-vue

选择默认选项：Default ([Vue 3] babel, eslint)。

2. 进入项目目录：

cd my-first-vue

3. 启动项目：

npm run serve

浏览器访问 http://localhost:8080/，你会看到 Vue 默认欢迎页面。

4. 项目结构解析

my-first-vue/
├── node_modules/      # 项目依赖包
├── public/            # 静态资源文件
├── src/               # 源码目录
│   ├── assets/        # 图片、样式等资源
│   ├── components/    # 组件目录
│   ├── App.vue        # 根组件
│   └── main.js        # 入口文件
├── package.json       # 项目配置文件
└── README.md          # 项目说明文件

核心文件介绍

• main.js： 项目入口文件，负责初始化 Vue 实例。
• App.vue： 根组件，所有组件的父级。
• components/： 存放项目的子组件。

总结

在这一篇中，你学习了：

• 什么是 Vue.js 以及它的特点。
• 如何安装 Node.js 和 Vue CLI。
• 如何创建并运行第一个 Vue 项目。
• Vue 项目的基础结构。

下一篇预告： 在 第2篇 中，我们将学习 Vue 的基础语法与数据绑定，带你正式开始编写 Vue 代码！