Vue.js 多页面应用的构建

# 1. Vue.js 多页面应用的构建

## 1. 了解 Vue.js 多页面应用的概念
- 1.1 什么是 Vue.js 多页面应用？
- Vue.js 多页面应用是指一个使用 Vue.js 框架来构建的 Web 应用程序，具有多个独立的页面，每个页面有自己的入口文件和对应的路由配置。
- 1.2 Vue.js 单页面应用 vs 多页面应用的区别
| 单页面应用 (SPA) | 多页面应用 (MPA) |
|---------------|----------------|
| 使用一个 HTML 文件，通过路由动态加载页面内容 | 每个页面都有自己的 HTML 文件，点击链接会加载新的页面 |
| 更适合构建交互性强、页面内容较多的应用 | 更适合传统的多页面网站架构，每个页面独立，互不影响 |
| 首次加载较慢，后续页面切换快速 | 每个页面单独加载，首次加载速度较快，但页面切换有时可能需要重新加载 |

通过以上对比，可以简单理解 Vue.js 多页面应用的基本概念以及与单页面应用的区别。在接下来的章节中，我们将深入探讨如何配置、创建、管理和优化 Vue.js 多页面应用。

# 2. 配置 Vue.js 多页面应用的环境

在这个章节中，我们将会详细介绍如何配置 Vue.js 多页面应用的环境。通过安装 Vue CLI 和创建多页面应用项目结构，我们可以为后续的开发工作做好准备。

### 2.1 安装 Vue CLI

在开始之前，确保已经安装了 Node.js 环境。接下来，我们可以通过 npm 安装 Vue CLI。打开命令行工具，执行以下命令：

npm install -g @vue/cli

安装完成后，我们可以使用以下命令来检查 Vue CLI 是否成功安装：

vue --version

### 2.2 创建多页面应用项目结构

接下来，让我们来创建一个 Vue.js 多页面应用的项目结构。使用 Vue CLI 可以轻松完成这个步骤：

vue create multi-page-app

在创建过程中，选择 Manually select features 以及 Babel、Router、Vuex，并根据需要选择其他功能。创建完成后，我们可以看到项目结构如下：

| 文件/文件夹 | 描述 |
|------------------|----------------------|
| src/ | 项目源代码目录 |
| public/ | 公共资源目录 |
| package.json | 项目配置文件 |
| vue.config.js | Vue CLI 配置文件 |

现在，我们已经配置好了 Vue.js 多页面应用的环境，接下来可以继续进行下一步的开发工作。

以下是配置 Vue.js 多页面应用的环境的流程图：

graph LR
    A[安装Vue CLI] --> B[创建多页面应用项目结构]
    B --> C{完成}

# 3. 创建多个页面

在 Vue.js 多页面应用中，我们需要创建多个页面来展示不同的内容或功能。下面将详细介绍如何创建多个页面的入口文件和设置多页面路由。

### 3.1 创建多个页面的入口文件

在项目的 `src` 目录下，可以为每个页面创建一个单独的入口文件。例如，我们创建两个页面：`Home` 和 `About`。

1. 在 `src` 目录下创建 `pages` 文件夹。
2. 在 `pages` 文件夹中创建 `Home` 和 `About` 文件夹。
3. 在 `Home` 文件夹中创建 `index.js` 作为入口文件，内容如下：

// pages/Home/index.js

import Vue from 'vue';
import Home from './Home.vue';

new Vue({
  render: (h) => h(Home),
}).$mount('#app');

4. 在 `About` 文件夹中同样创建 `index.js` 作为入口文件。

### 3.2 设置多页面路由

在 `vue.config.js` 文件中配置多页面路由，为每个页面指定对应的 HTML 模板和入口文件。

module.exports = {
  pages: {
    Home: {
      entry: 'src/pages/Home/index.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'Home Page',
    },
    About: {
      entry: 'src/pages/About