Vue 2 教程：如何快速搭建一个响应式前端项目 – wiki基地

Vue 2 终极教程：从零到一，快速搭建一个惊艳的响应式前端项目

在前端技术日新月异的今天，Vue.js 凭借其平易近人的学习曲线、强大的生态系统和卓越的性能，依然是无数开发者心中的首选框架。尽管 Vue 3 带来了许多激动人心的新特性，但 Vue 2 在大量现有项目中仍然占据着核心地位，其稳定性和成熟的生态使其在许多场景下依然是可靠的选择。

本教程将是一次深度实践之旅。我们将从零开始，手把手地带你使用 Vue 2 和 Vue CLI，构建一个完整、美观且完全响应式的个人作品集网站。你不仅会学会如何搭建项目、组织代码，更将深入理解组件化开发、路由管理以及如何用最纯粹的 CSS 实现优雅的响应式布局。

本文目标读者：
* 对 HTML, CSS, JavaScript 有基本了解。
* 希望系统学习 Vue 2项目搭建流程的初学者。
* 希望巩固 Vue 2 实践经验并学习响应式布局技巧的开发者。

我们将完成什么？
一个包含首页、导航、页脚、英雄区域（Hero Section）和项目展示网格的个人作品集网站。这个网站将在桌面、平板和手机设备上都拥有出色的浏览体验。

第一章：环境搭建与思想准备 (Environment Setup)

工欲善其事，必先利其器。在编写任何代码之前，我们需要确保开发环境已经准备就绪。

1.1 安装 Node.js

Vue CLI 依赖于 Node.js 环境。Node.js 不仅为我们提供了 JavaScript 的服务端运行环境，更重要的是附带了 npm (Node Package Manager)，它是世界上最大的软件注册表，我们将用它来管理项目的所有依赖。

访问官网：前往 Node.js 官方网站。
选择版本：推荐下载 LTS (Long Term Support) 版本，因为它最稳定，拥有长期的官方支持。
安装：下载对应你操作系统的安装包，然后像安装普通软件一样，一路点击“下一步”即可。
验证安装：安装完成后，打开你的终端（Windows 用户可以使用 Command Prompt 或 PowerShell，macOS/Linux 用户使用 Terminal），输入以下命令：

bash node -v npm -v

如果你能看到类似 v16.18.0 和 8.19.2 这样的版本号输出，那么恭喜你，Node.js 环境已经成功安装。

1.2 安装 Vue CLI

Vue CLI (Command Line Interface) 是 Vue.js 官方提供的标准化工具，它极大地简化了项目的创建、配置、开发和构建流程。

在你的终端中，运行以下命令来全局安装 Vue CLI：

bash npm install -g @vue/cli

npm install 是安装命令。
-g 标志意味着“全局安装”，这样你就可以在任何目录下使用 vue 命令。
@vue/cli 是 Vue CLI 的包名。

安装过程可能需要几分钟。完成后，同样可以验证一下：

bash vue --version

看到版本号输出（例如 @vue/cli 4.5.19），即表示 Vue CLI 已准备就মণ্ডি。

第二章：创建你的第一个 Vue 项目 (Project Scaffolding)

现在，激动人心的时刻到了！我们将使用 Vue CLI 来创建我们的项目骨架。

2.1 初始化项目

选择一个你喜欢的工作目录，打开终端，然后运行：

bash vue create my-responsive-portfolio

my-responsive-portfolio 是你的项目名称，可以随意更改。

执行命令后，CLI 会提供几个预设选项：

“`
Vue CLI v4.5.19
? Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)

Manually select features
“`

为了更好地理解项目配置，我们选择 Manually select features (手动选择特性)，然后按回车。

2.2 自定义项目特性

接下来，你将进入一个交互式的特性选择界面。使用空格键选中或取消，使用上下箭头移动。为了我们的项目，请确保选中以下几项：

(*) Choose Vue version (选择 Vue 版本)
(*) Babel (用于转换最新的 JavaScript 语法)
(*) Router (用于构建单页面应用的路由)
(*) Linter / Formatter (用于代码规范和格式化)

选择完毕后，按回车进入下一步配置。

Choose a version of Vue.js to start out with:
选择 2.x。
Use history mode for router?
输入 Y (Yes)。这会让我们的 URL 看起来更干净（例如 mysite.com/about 而不是 mysite.com/#/about）。
Pick a linter / formatter config:
选择 ESLint + Prettier。这是一个黄金组合，ESLint 负责检查代码质量和风格，Prettier 负责自动格式化代码，让你的代码永远保持统一、优美的格式。
Pick additional lint features:
选择 Lint on save (保存时检查)。这能在你编码时实时发现错误。
Where do you prefer placing config for Babel, ESLint, etc.?
选择 In dedicated config files (在独立的文件中配置)。这样能让主目录更整洁。
Save this as a preset for future projects?
可以输入 N (No)。

CLI 现在会根据你的选择开始创建项目并安装所有依赖。这个过程同样需要一些时间，请耐心等待。

2.3 启动开发服务器

当一切就绪，终端会提示你：

“`
🎉 Successfully created project my-responsive-portfolio.
👉 Get started with the following commands:

$ cd my-responsive-portfolio
$ npm run serve
“`

按照指示，进入项目目录并启动开发服务器：

bash cd my-responsive-portfolio npm run serve

编译成功后，你会看到类似下面的输出：

App running at: - Local: http://localhost:8080/ - Network: http://192.168.1.10:8080/

在浏览器中打开 http://localhost:8080，你将看到 Vue 的欢迎页面。太棒了！你的 Vue 2 项目已经成功运行起来，并且它还支持热重载 (Hot Reload)，这意味着你修改并保存代码后，浏览器会自动刷新，极大提升开发效率。

第三章：项目结构深度解析 (Project Structure)

在开始编码前，我们必须理解 Vue CLI 为我们生成的项目结构。打开 my-responsive-portfolio 文件夹，你会看到：

node_modules/: 存放所有项目依赖的地方。
public/: 存放静态资源。此文件夹中的文件不会被 Webpack 处理，它们会被直接复制到最终的构建目录中。index.html 是应用的入口 HTML 文件，Vue 应用将被挂载到这个文件的 <div id="app"></div> 上。
src/: 这是我们的主战场，99% 的代码将在这里编写。
- assets/: 存放会被 Webpack 处理的静态资源，如 CSS、图片、字体等。
- components/: 存放可复用的 UI 组件。例如按钮、卡片、对话框等。
- router/: 存放路由配置。index.js 文件定义了路径和页面组件的映射关系。
- views/: 存放页面级组件。通常每个路由对应一个视图组件，如 Home.vue, About.vue。
- App.vue: 根组件。所有页面视图都将在这里被渲染，是所有组件的父组件。
- main.js: 应用入口文件。在这里，我们创建 Vue 实例，并把路由、插件等“挂载”到应用中。

第四章：规划与基础布局 (Planning & Basic Layout)

我们的目标是创建一个响应式作品集。让我们先进行规划。

页面结构:
1. Header (头部): 包含 Logo 和导航链接。
2. Main Content (主要内容):
* Hero Section (英雄区): 一个引人注目的欢迎区域。
* Projects Grid (项目网格): 展示作品的卡片列表。
3. Footer (页脚): 版权信息等。

响应式策略:
我们将采用 “移动端优先 (Mobile-First)” 的策略。这意味着我们先编写适配小屏幕的样式，然后通过媒体查询 (@media) 逐步为平板和桌面等大屏幕设备添加或覆盖样式。

断点 (Breakpoints) 定义:
* Mobile: < 768px
* Tablet: >= 768px
* Desktop: >= 1024px

4.1 清理默认代码

首先，让我们清理一下 CLI 生成的模板代码。
1. 删除 src/components/HelloWorld.vue 文件。
2. 清空 src/views/Home.vue 和 src/views/About.vue 里的内容，只留下最基本的模板：

```vue
<!-- Home.vue -->
<template>
  <div class="home">
    <!-- 我们的首页内容将放在这里 -->
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>
```

修改 src/App.vue，移除默认的导航和样式：

“`vue

“`

4.2 创建基础布局组件

现在，我们来创建 Header 和 Footer 组件。

在 src/components/ 目录下创建 AppHeader.vue 文件：

“`vue

`` **注意scoped属性**：

```
将这两个组件集成到 App.vue 中，使其成为全局布局的一部分。

```vue

`` 现在刷新浏览器，你应该能看到固定在页面顶部和底部的Header和Footer` 了。

第五章：构建页面内容与实现响应式

5.1 创建页面内容组件

我们将首页的内容拆分为两个组件：HeroSection 和 ProjectsGrid。

在 src/components/ 目录下创建 HeroSection.vue：

```vue

```
在 src/components/ 目录下创建 ProjectsGrid.vue，暂时先用静态内容填充：

```vue

```
在 src/views/Home.vue 中使用这两个新组件：

```vue

```

5.2 实现响应式布局 (Mobile-First)

现在我们的页面有了基本结构，但 ProjectsGrid 在所有屏幕上都是单列。接下来，我们将用媒体查询实现响应式。

修改 src/components/ProjectsGrid.vue 的 <style> 部分：

```vue

```

发生了什么？
* 默认样式 (Mobile-First): 我们设置 grid-template-columns: 1fr;，这让网格在小屏幕上自然地呈现为单列。
* @media (min-width: 768px): 当屏幕宽度达到 768px 时，这条规则生效，将网格布局覆盖为 repeat(2, 1fr)，即等宽的两列。
* @media (min-width: 1024px): 当屏幕宽度达到 1024px 时，布局再次被覆盖为三列。

现在，打开浏览器的开发者工具（通常是 F12），切换到设备模拟模式。当你拖动改变屏幕宽度时，你会看到项目网格的列数在 768px 和 1024px 这两个断点处发生了平滑的变化。这就是响应式设计的核心！

我们再对 AppHeader.vue 做一点响应式调整，让它在小屏幕上更紧凑。

```vue

```

第六章：动态数据与组件通信

静态内容是不够的。一个真实的应用需要处理动态数据。我们将改造 ProjectsGrid，使其从数据中动态渲染项目卡片。

6.1 创建数据驱动的卡片

首先，在 src/components 中创建一个可复用的 ProjectCard.vue 组件。

```vue

`` **关键点**：我们使用了props来接收一个名为project的对象。props` 是父组件向子组件传递数据的桥梁。
修改 ProjectsGrid.vue，使用 v-for 循环和 ProjectCard 组件。

```vue

```

发生了什么？
* data() function: 我们在 <script> 中添加了 data 函数，它返回一个对象，这个对象包含了组件的响应式状态。这里我们定义了一个 projects 数组。
* v-for directive: v-for="project in projects" 指令会遍历 projects 数组。对于数组中的每一项，它都会渲染一个 <ProjectCard> 组件。
* :key: key 是一个特殊的 attribute，Vue 用它来高效地更新 DOM。key 应该是唯一的，我们使用 project.id。
* :project="project": 这是 v-bind:project 的缩写。它将 v-for 循环中当前的 project 对象作为 prop 传递给 ProjectCard 子组件。

现在，你的项目网格是由 data 中的数据动态生成的。如果你想添加或修改项目，只需编辑 projects 数组即可，页面会自动更新。

第七章：构建与部署 (Build & Deployment)

项目开发完成后，最后一步就是将其构建为静态文件并部署到服务器上。

7.1 构建项目

在你的项目根目录下，运行构建命令：

bash npm run build

这个命令会执行优化操作，包括代码压缩、文件合并、Tree Shaking（摇树优化，移除未使用的代码）等，最后在项目根目录下生成一个 dist 文件夹。dist 文件夹里的内容就是最终可以部署的静态网站。

7.2 部署选项

你可以将 dist 文件夹的内容上传到任何静态文件托管服务。
* Netlify / Vercel: 极力推荐。它们提供了无缝的 Git 集成。你只需将代码推送到 GitHub/GitLab，它们会自动为你构建和部署，并提供免费的 HTTPS。
* GitHub Pages: 也是一个免费的好选择。如果你想部署到 username.github.io/my-responsive-portfolio 这样的子路径，需要修改 vue.config.js 文件。在项目根目录创建 vue.config.js：
javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/my-responsive-portfolio/' : '/' }
然后重新运行 npm run build。
* 传统虚拟主机 / VPS: 只需通过 FTP 或 SCP 将 dist 文件夹里的所有内容上传到你的网站根目录（如 public_html）。

结论与展望

恭喜你！你已经成功地从零开始，使用 Vue 2 构建并部署了一个功能完善、代码结构清晰、完全响应式的前端项目。

通过这个教程，你掌握了：
* Vue CLI 的强大能力，从项目创建到开发、构建。
* 组件化开发的核心思想，将复杂界面拆分为可管理、可复用的组件。
* 父子组件通信，通过 props 传递数据。
* 使用 v-for 进行列表渲染，实现数据驱动的视图。
* Vue Router 的基本使用，构建单页面应用。
* 移动端优先的 CSS 策略和媒体查询，实现完美的响应式布局。

这只是你 Vue 旅程的开始。接下来，你可以探索更多高级主题：
* Vuex: 用于复杂应用的状态管理。
* API 通信: 使用 axios 等库从后端获取数据。
* UI 框架: 探索如 Vuetify, Element UI 等库，加速开发。
* Vue 3 与 Composition API: 学习 Vue 的未来，体验更灵活、更强大的代码组织方式。

继续编码，不断实践，你将在前端开发的世界里走得更远。祝你好运！

Vue 2 教程：如何快速搭建一个响应式前端项目 – wiki基地

Vue 2 终极教程：从零到一，快速搭建一个惊艳的响应式前端项目

第一章：环境搭建与思想准备 (Environment Setup)

1.1 安装 Node.js

1.2 安装 Vue CLI

第二章：创建你的第一个 Vue 项目 (Project Scaffolding)

2.1 初始化项目

2.2 自定义项目特性

2.3 启动开发服务器

第三章：项目结构深度解析 (Project Structure)

第四章：规划与基础布局 (Planning & Basic Layout)

4.1 清理默认代码

4.2 创建基础布局组件

第五章：构建页面内容与实现响应式

5.1 创建页面内容组件

Welcome to My Portfolio

My Projects

5.2 实现响应式布局 (Mobile-First)

第六章：动态数据与组件通信

6.1 创建数据驱动的卡片

{{ project.title }}

My Projects

第七章：构建与部署 (Build & Deployment)

7.1 构建项目

7.2 部署选项

结论与展望

发表评论取消回复

Vue 2 终极教程：从零到一，快速搭建一个惊艳的响应式前端项目

第一章：环境搭建与思想准备 (Environment Setup)

1.1 安装 Node.js

1.2 安装 Vue CLI

第二章：创建你的第一个 Vue 项目 (Project Scaffolding)

2.1 初始化项目

2.2 自定义项目特性

2.3 启动开发服务器

第三章：项目结构深度解析 (Project Structure)

第四章：规划与基础布局 (Planning & Basic Layout)

4.1 清理默认代码

4.2 创建基础布局组件

第五章：构建页面内容与实现响应式

5.1 创建页面内容组件

Welcome to My Portfolio

My Projects

5.2 实现响应式布局 (Mobile-First)

第六章：动态数据与组件通信

6.1 创建数据驱动的卡片

{{ project.title }}

My Projects

第七章：构建与部署 (Build & Deployment)

7.1 构建项目

7.2 部署选项

结论与展望

发表评论 取消回复

发表评论取消回复