1.2 安装与起步

文档摘要

Vue.js 安装与起步：前端开发快速入门指南在构建现代化用户界面之前，完成 Vue.js 的安装并运行首个应用是至关重要的基础步骤。本文提供全面且清晰的 Vue.js 安装与起步指南，涵盖多种环境搭建方案，帮助开发者快速配置开发环境并编写第一个 Vue.js 应用程序。 Vue.js 安装方式：多场景环境搭建方案 Vue.js 作为一个灵活且渐进式的 JavaScript 框架，提供了多种安装方式。开发者可根据项目规模、技术栈偏好及构建需求，选择最匹配的 Vue.js 安装方法。 1.1 通过标签直接引入 (CDN 方式) 这是最便捷的 Vue.js 安装方式，特别适合初学者学习、快速原型开发或轻量级页面嵌入。只需在 HTML 文件中添加标签，指向 Vue.

Vue.js 安装与起步：前端开发快速入门指南

在构建现代化用户界面之前，完成 Vue.js 的安装并运行首个应用是至关重要的基础步骤。本文提供全面且清晰的 Vue.js 安装与起步指南，涵盖多种环境搭建方案，帮助开发者快速配置开发环境并编写第一个 Vue.js 应用程序。

1. Vue.js 安装方式：多场景环境搭建方案

Vue.js 作为一个灵活且渐进式的 JavaScript 框架，提供了多种安装方式。开发者可根据项目规模、技术栈偏好及构建需求，选择最匹配的 Vue.js 安装方法。

1.1 通过 `<script>` 标签直接引入 (CDN 方式)

这是最便捷的 Vue.js 安装方式，特别适合初学者学习、快速原型开发或轻量级页面嵌入。只需在 HTML 文件中添加 <script> 标签，指向 Vue.js 的 CDN（内容分发网络）地址即可完成引入。

代码实践：CDN 引入 Vue.js


<!DOCTYPE html>
<html>
<head>
  <title>Vue.js 起步示例</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <!-- 引入 Vue.js (开发版本) -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return {
          message: '你好，Vue.js!'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

代码详解：

HTML 基础结构：<!DOCTYPE html> 及 <html>、<head>、<body> 标签构成了标准的 HTML5 文档框架。
挂载点与模板语法：<div id="app"> {{ message }} </div> 定义了一个 id 为 app 的容器。Vue.js 将接管此元素作为应用的挂载点。{{ message }} 为 Vue 的插值语法，用于动态渲染 message 变量的值。
引入 Vue.js 核心库：<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 通过 CDN 引入 Vue 3 的全局构建版本。注意：在生产环境中，应替换为压缩后的生产版本（如 vue.global.prod.js）以优化加载性能。
应用实例化与挂载：
- const { createApp } = Vue;：从全局 Vue 对象中解构出 createApp 方法，这是 Vue 3 创建应用实例的核心 API。
- createApp({ ... })：传入配置对象创建 Vue 应用实例。
- data() { ... }：返回包含应用响应式数据的对象，此处定义了 message 属性。
- .mount('#app')：将应用实例挂载到指定的 DOM 元素（#app）上，建立数据与视图的绑定关系。

运行验证：
将上述代码保存为 index.html 并在浏览器中打开，页面将渲染出 "你好，Vue.js!"，表明 CDN 方式安装与运行成功。

图示：CDN 引入流程

1.2 使用 npm 或 yarn 安装 (推荐中大型项目)

对于构建复杂、模块化的现代 Vue.js 应用，强烈推荐使用 npm 或 yarn 包管理器进行安装。此方式便于管理项目依赖，并完美支持 Vue 单文件组件 (SFC) 及现代构建工具（如 Vite）。

前提条件：

已安装 Node.js 环境（npm 会随 Node.js 自动安装）。若偏好 yarn，可通过 npm install -g yarn 全局安装。

安装与配置步骤：

创建项目目录：在本地创建一个新的文件夹作为 Vue.js 项目根目录，例如 my-vue-app。
初始化项目：在终端中进入该目录，执行官方脚手架命令：
```
npm init vue@latest
# 或使用 yarn:
# yarn create vue
```
此命令将启动交互式配置工具。

配置项目特性：根据提示选择所需功能。初学者可保持默认选项，后续可按需添加 TypeScript、Vue Router、Pinia 状态管理及测试工具等。


Vue.js - The Progressive JavaScript Framework
√ Project name: ... my-vue-app
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit testing? ... No / Yes
√ Add Cypress for E2E testing? ... No / Yes
√ Add ESLint for code linting? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

Scaffolding project in ./my-vue-app...
Done. Now run:
  cd my-vue-app
  npm install
  npm run dev

安装依赖：进入项目目录并安装所需 npm 包：


cd my-vue-app
npm install
# 或使用 yarn:
# yarn install

启动开发服务器：依赖安装完毕后，启动本地开发环境：
```
npm run dev
# 或使用 yarn:
# yarn dev
```
终端将输出本地访问地址（通常为 http://localhost:5173），在浏览器中打开即可看到 Vue 欢迎页面。

项目目录结构解析：


my-vue-app/
├── node_modules/       # 项目依赖包 (npm/yarn 安装)
├── public/             # 静态资源文件夹 (如 index.html, favicon.ico)
├── src/                # 源代码核心目录
│   ├── assets/         # 静态资源 (图片, 全局 CSS)
│   ├── components/     # Vue 可复用组件 (如 HelloWorld.vue)
│   ├── App.vue         # 根组件
│   └── main.js         # 应用入口文件
├── .gitignore          # Git 忽略配置文件
├── index.html          # HTML 入口文件
├── package.json        # 项目配置与依赖清单
├── package-lock.json   # npm 依赖版本锁定文件
├── yarn.lock           # yarn 依赖版本锁定文件
└── vite.config.js      # Vite 构建工具配置文件

核心目录说明：

src/：开发核心目录。main.js 负责初始化 Vue 实例并挂载 App.vue 根组件；components/ 存放封装的 UI 组件。
public/：存放无需经过构建工具处理的纯静态资源，构建时会直接复制到产物目录。
vite.config.js：Vite 构建工具的配置文件，用于自定义端口、代理、插件等构建行为。

图示：npm/yarn 安装与启动流程

1.3 使用 Vue CLI (适用于 Vue 2 或特定 Webpack 场景)

Vue CLI 是 Vue 官方提供的基于 Webpack 的命令行工具。尽管 Vue 3 官方首推 Vite，但 Vue CLI 在以下场景仍具价值：

维护 Vue 2 遗留项目：Vue CLI 对 Vue 2 生态支持最为完善。
深度定制 Webpack 配置：需要利用 Webpack 丰富的插件生态和底层配置能力。

安装与使用：


# 全局安装 Vue CLI
npm install -g @vue/cli

# 创建项目
vue create my-vue-cli-app

在交互式提示中，可选择默认预设或手动配置特性（若创建 Vue 3 项目，需在手动配置中选择 Vue 3 版本）。后续依赖安装与启动命令与 npm/yarn 方式一致。

图示：Vue CLI 安装流程

1.4 安装方式选型建议

快速原型与轻量嵌入：选择 CDN 引入，零配置即刻上手。
现代中大型 Vue 3 项目：选择 npm/yarn + Vite，享受极速热更新与模块化开发体验（官方推荐）。
Vue 2 项目或重度 Webpack 依赖：选择 Vue CLI，获取稳定的传统构建支持。

2. Vue.js 起步：构建首个交互式应用

完成环境搭建后，即可开始编写 Vue.js 应用。以下通过一个经典的“计数器”示例，解析 Vue 的核心运行机制。

代码实践：计数器应用 (基于 CDN)


<!DOCTYPE html>
<html>
<head>
  <title>Vue.js 计数器应用</title>
</head>
<body>
  <div id="app">
    <p>计数器值: {{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return {
          count: 0
        }
      },
      methods: {
        increment() {
          this.count++;
        },
        decrement() {
          this.count--;
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

核心机制解析：

声明式渲染与数据绑定：
<p>计数器值: {{ count }}</p> 使用了插值语法。当 data 中的 count 值发生改变时，Vue 的响应式系统会自动追踪依赖并更新对应的 DOM 节点，无需手动操作 DOM。
事件处理机制：
@click="increment" 是 v-on:click 的语法糖，用于监听按钮的点击事件，并触发 methods 中定义的 increment 方法。
应用实例与上下文 (this)：
在 methods 内部，通过 this.count 访问和修改响应式数据。Vue 会自动将 methods 中的方法绑定到应用实例上，确保 this 指向正确的上下文。

图示：计数器应用数据流转

3. 进阶学习路径：深入 Vue.js 生态

掌握基础安装与起步后，建议沿以下路径系统深入学习 Vue.js 的核心特性与生态工具：

模板语法进阶：掌握条件渲染 (v-if/v-show)、列表渲染 (v-for)、属性绑定 (v-bind) 及表单双向绑定 (v-model)。
组件化开发：学习单文件组件 (SFC) 的编写，掌握 Props 传递、Emits 事件触发及插槽 (Slots) 机制，构建高复用性的 UI 架构。
生命周期钩子：理解 onMounted、onUpdated、onUnmounted 等 Composition API 生命周期函数，在组件的不同阶段执行副作用逻辑。
状态管理与路由：针对复杂单页应用 (SPA)，引入 Pinia 进行全局状态管理，使用 Vue Router 实现前端路由与视图切换。
组合式 API (Composition API)：深入学习 ref、reactive、computed 及 watch，提升复杂业务逻辑的代码组织与复用能力。

总结

本文详细梳理了 Vue.js 的主流安装方案（CDN、npm/yarn+Vite、Vue CLI），并对比了各方案的适用场景。通过计数器应用的实战演练，直观展示了 Vue.js 数据驱动视图、响应式更新及事件处理的核心设计理念。合理选择构建工具并扎实掌握基础概念，将为后续开发高性能、可维护的现代 Vue.js 应用奠定坚实基础。