基于 Vue.js 的多页面应用开发 —— 从 SPA 到 MPA

面试官：小伙子，你的代码为什么这么丝滑？

引言

随着互联网的快速发展，Web 前端变得越来越重要。前段时间，随着 SPA（单页应用）的兴起，我们也开始经常听到 SPA 这个词。单页应用通过异步加载数据，实现快速响应和无感刷新，受到了众多开发者的喜爱。

但是，有时候我们需要在一个应用中包含多个独立的页面，类似于传统的多页应用（MPA）。这时候，我们应该如何使用 Vue.js 进行开发呢？本文将围绕这个问题展开讨论。

SPA vs MPA：什么是更好的选择？

在设计 Web 应用时，我们需要考虑很多因素。SPA 和 MPA 各自有各自的优缺点，我们应该根据实际需求来选择其中之一。

优点

  • SPA 优点：
    • 状态实现更加简单
    • 前端和后端逻辑分离
    • 单页应用更流畅
    • 增强了用户体验
  • MPA 优点：
    • 更利于 SEO
    • 更容易维护
    • 更容易做性能优化
    • 更容易实现多语言支持
    • 更易于调试

缺点

  • SPA 缺点：
    • 首次加载速度较慢
    • 不利于 SEO
    • 对于不支持 JavaScript 的浏览器兼容性较差
    • 非 Vue.js 的默认用法（Vue.js 实现 SPA 需要自己实现路由等功能）
  • MPA 缺点：
    • 前后端代码需要紧密配合
    • 对于多语言支持需要重新编译等操作
    • 用户体验稍微逊色一些

综上，我们可以得出下面的结论：

  • 如果是社交网站、音乐网站等需要用户体验和动态交互的站点，使用 SPA 较为合适；
  • 如果是信息发布网站、博客等需要 SEO 和多语言支持的站点，使用 MPA 更为适合。

基于 Vue.js 实现 SPA

Vue.js 作为前端界面开发的重量级框架，可以方便地开发 SPA 网站。Vue.js 通过路由机制，实现了对于单页应用的完美支持。接下来我们就来看一下如何使用 Vue.js 来开发 SPA。

路由机制

Vue.js 通过路由机制来实现 SPA。它的核心是 Vue Router。

在 Vue.js 中，我们通过 Vue.js 官方推荐的 Vue CLI 来构建项目。Vue CLI 会帮我们配置好 Babel、ESLint 等常用环境，同时也提供了许多配置项，例如是否需要使用 Router、Vuex 等。

如果我们需要使用 Vue Router，我们可以使用命令行命令安装：

- --- ------- ----------

安装完成之后，在项目的 main.js 中配置好路由：

------ --- ---- -----
------ --- ---- -----------
------ ------ ---- ----------

------------------------ - -----

--- -----
  -------
  ------- - -- ------
-----------------

这个文件配置了 Vue 对象、App，以及来自 router.js 的路由设定。

------ --- ---- -----
------ ------ ---- ------------
------ ---- ---- ------------------
------ ----- ---- -------------------

---------------

------ ------- --- --------
  ------- -
    -
      ----- ----
      ----- -------
      ---------- ----
    --
    -
      ----- ---------
      ----- --------
      ---------- -----
    -
  -
--

这个文件设置了 Vue Router 的路由，其中包括了两个路由：Home 和 About。路径分别为 / 和 /about。

利用 Vue.js 实现动态展示

通过 Vue.js 路由机制，我们可以实现常规的 SPA 动态切换。

代码示例

项目搭建过程可以参考经典的 Vue.js 模板项目 vue-webpack-boilerplate。在 vue-webpack-boilerplate 的基础上，我们可以按照如下的步骤来实现一个简单的博客网站：

第一步：项目初始化

下面的命令可以帮助我们快速的构建一个新的 Vue.js 项目：

--- ---- ------- --------

我们需要做一些选择，例如：

  • Project name（项目名称）
  • Project description（项目描述）
  • Author（作者）
  • Use ESLint to lint your code（是否使用 ESLint 检查代码风格）
  • Pick an ESLint preset（ESLint 风格配置）
  • Setup unit tests（是否需要为项目配置单元测试）
  • Setup e2e tests with Nightwatch（是否需要为项目配置e2e测试）

最终生成的初始化项目：

-
--- ---------
--- ---------------
--- ----
--- --- ----------
--- --- --
--- --- --- -------------
--- --- --- ---------------
--- --- --- -------------------
--- --- --------
--- --- -----------------
--- --- ------
---     --- ---
---         --- ----------------
--- ----------              - ----
--- ------------
--- -----------------
--- ------------
--- ---
--- --- ------- 
--- --- ------
--- --- --- --------
--- --- ----------
--- --- -------
--- --- ------
--- --- --- --------           - ------
--- --- -----
---     --- ---------
---     --- -----------       - ------
---     --- --------
---     --- ----------        - ----
---     --- ----------        - ----
--- ------
--- --- --------
--- -----------------

第二步：添加页面

在 vue-blog 项目中，我们添加了 4 个页面。Home 页面用作展示博客列表，About 页面展示作者信息，Signup 页面用于新用户注册，Signin 页面用于用户登录。

每个页面都有自己的 Vue SFC（Single File Component）：

  • Home.vue：
----------
  -----
    ----
      --- ---------------- ------ -- --------- -------------
        ------------ ------------------------------- ------------- ----------------
        ---- -------------------------------
      -----
    -----
  ------
-----------

--------
------ ----- ---- -------

------ ------- -
  ---- -- -
    ------ -
      --------- --
    -
  --
  ------- -- -
    -------------------------------------------------- -
      ------- -
        ------- --
      -
    ----------- -- -
      ------------- - --------
    ------------ -- -
      --------------------- -- ----
    --
  -
-
---------
  • About.vue：
----------
  -----
    --------- -------
    ------- -- -- ------------
  ------
-----------
  • Signup.vue：
----------
  -----
    -------- -------
    ------
      -----
        ------------------------
        ------ ----------- -------------------
      ------
      -----
        ------------------------
        ------ --------------- -------------------
      ------
      -----
        ------- ------------- ---------------------------- -----------
      ------
    -------
  ------
-----------

--------
------ ----- ---- -------

------ ------- -
  ---- -- -
    ------ -
      --------- ---
      --------- --
    -
  --
  -------- -
    ------ -- -
      ------------------------------------------------ -
        --------- --------------
        --------- -------------
      ----------- -- -
        ---------------------
      ------------ -- -
        --------------------- -- ----
      --
    -
  -
-
---------
  • Signin.vue：
----------
  -----
    -------- -------
    ------
      -----
        ------------------------
        ------ ----------- -------------------
      ------
      -----
        ------------------------
        ------ --------------- -------------------
      ------
      -----
        ------- ------------- ---------------------------- -----------
      ------
    -------
  ------
-----------

--------
------ ----- ---- -------

------ ------- -
  ---- -- -
    ------ -
      --------- ---
      --------- --
    -
  --
  -------- -
    ------ -- -
      ------------------------------------------------ -
        --------- --------------
        --------- -------------
      ----------- -- -
        ---------------------
      ------------ -- -
        --------------------- -- ----
      --
    -
  -
-
---------

第三步：添加路由

我们需要按照如下的方式配置路由：

------ --- ---- -----
------ ------ ---- ------------
------ ---- ---- -------------------
------ ------- ---- ----------------------
------ ----- ---- --------------------
------ ------ ---- ---------------------
------ ------ ---- ---------------------

---------------

------ ------- --- --------
  ------- -
    -
      ----- ----
      ----- -------
      ---------- ----
    --
    -
      ----- ---------------
      ----- ----------
      ---------- -------
    --    
    -
      ----- ---------
      ----- --------
      ---------- -----
    --
    -
      ----- ----------
      ----- ---------
      ---------- ------
    --
    -
      ----- ----------
      ----- ---------
      ---------- ------
    -
  -
--

这里我们定义了 5 个可供访问的路由：

  • /: 网站主页
  • /article/:id: 访问文章详情页面，其中 :id 表示文章的 id 号
  • /about: 关于作者的页面
  • /signup: 新用户注册页面
  • /signin: 用户登录页面

第四步：添加 RESTful API

我们可以通过 JSON Server 来通过简单的 API Server 来模拟RESTful API，用来提供数据。具体的过程步骤不再赘述。

第五步：运行应用

我们可以通过下面的命令行命令来启动应用：

--- --- -----

这个命令可以启动一个本地的静态服务器。

在浏览器中打开 http://localhost:8080/ 可以看到项目的主页。

基于 Vue.js 实现 MPA

在实现 MPA 的时候，Vue.js 有很多对应的插件和库。下面我们将介绍如何使用 Vue.js 的插件来实现 MPA。

Vue Multi-Page

Vue Multi-Page 是 Vue.js 的一个插件，可以用于解决 Vue.js MPA 开发中的一些问题。

使用 Vue Multi-Page，我们可以仅仅只需要配置一些简单的配置项就可以创建多个页面，并且每个页面都可以有自己的路由。

下面我们将使用 Vue Multi-Page 插件来实现 MPA 的具体操作流程。

第一步：项目初始化

我们可以使用 Vue CLI 快速地创建一个新项目：

--- ------ --------

这个命令将帮我们创建一个完整的 Vue.js 项目，包括了开发环境、组件文件等等。craete 之后，在根目录下会生成一个 vue.config.js 的配置文件，我们可以在这个文件中添加一些 Vue Multi-Page 的相关配置。

第二步：添加多个页面

我们为每个页面都创建一个文件夹，例如：

- ---------          - ----
- ------
    - ----------     - -----------
    - ----------     - -- - -----
    - ----------     - -- - -----
- ----
    - -------        - ----
    - -------        - ------
    - -----------
    - ------
        - -------    - -- - ----
        - ---------  - -- - -----
        - -----------
    - ------
        - -------    - -- - ----
        - ---------  - -- - -----
        - -----------

每个入口文件（index.html，page1.html 和 page2.html）的内容可以类似下面这样：

--------- -----
----- ----------
  ------
    ----- ----------------
    ---------- ---------- ------------
  -------
  ------
    ---- ---------------
    ------- -----------------------------------
  -------
-------

其中 src/page1/main.js 类似于下面这样：

------ --- ---- -----
------ --- ---- -----------
------ ------ ---- ----------

------------------------ - -----

--- -----
  -------
  ------- - -- ------
-----------------

第三步：配置 Vue Multi-Page

在配置 Vue Multi-Page 的时候，我们需要在 vue.config.js 中添加一些配置信息。这些配置信息包括页面列表、路径等等。

-------------- - -
  ------ -
    ------ -
      ------ --------------
      --------- --------------------
      --------- -------------
      ------ ---- ---------- ------
    --
    ------ -
      ------ --------------------
      --------- --------------------
      --------- -------------
      ------ ---- ---------- ---- - ---- ---
    --
    ------ -
      ------ --------------------
      --------- --------------------
      --------- -------------
      ------ ---- ---------- ---- - ---- ---
    -
  -
-

在配置了 Vue Multi-Page 之后，我们可以在运行时切换页面，例如：

http://localhost:8080/page1.html

http://localhost:8080/page2.html

Vue Multi-Page 提供了一种简单、高效的方式，通过在 Vue.js 项目中配置多个入口文件来实现多页面应用程序。

结论

本文主要介绍了基于 Vue.js 实现多页面应用开发的相关技术，包括从 SPA 到 MPA 等一系列的功能点。通过本文的学习，可以从更深的层面上去理解 Vue.js 在前端应用开发中的角色和能力，可以对 Vue.js 的学习和应用有更深的理解和把握。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f197ca6fbf9601973d88a2

阅读全文

猜你喜欢

  • 使用 Headless CMS 简化博客网站搭建

    在传统的博客网站搭建模式中，通常需要使用一个完整的 CMS 系统，如 WordPress 或 Joomla 等，它们提供了完整的前端和后端功能，包括用户管理、文章发布、样式自定义等。

    5 小时前
  • Cypress 错误解决：如何解决 No Such Element 错误

    Cypress 是一个基于 JavaScript 的前端自动化测试框架，它可以帮助我们高效地编写和运行自动化测试用例。然而，在使用 Cypress 进行测试的过程中，我们有时会遇到 No Such E...

    5 小时前
  • Mocha 测试中怎么样才能只执行部分测试用例？

    在使用 Mocha 进行测试时，你可能需要只运行部分测试用例而不是全部运行。这可能是因为你的测试套件非常大，或者你想只测试一部分代码。本文将介绍如何在 Mocha 中只执行部分测试用例，并提供一些示例...

    5 小时前
  • IOS 开发：如何优化本地存储

    本地存储是一种在移动应用程序和网站开发中常见的技术，它可以在用户离线时继续提供信息、内容和功能。在 IOS 开发中，使用本地存储的最佳方法是使用内置数据库 SQLite。

    5 小时前
  • TypeScript 中使用 let 和 const 定义变量和常量

    介绍 TypeScript 是一种静态类型检查器，它扩展了 JavaScript 并使其更易于使用和维护。在 TypeScript 中，我们可以使用 let 和 const 来定义变量和常量。

    5 小时前
  • 如何修复 CSS Reset 对滚动条样式的影响？

    在前端开发中，CSS Reset 是一个非常常见的技术。 它的原理是通过将浏览器的默认样式重置为一致的标准，以确保不同浏览器之间的样式相同。 但是 CSS Reset 常常会对浏览器滚动条样式造成影响...

    5 小时前
  • 在 Fastify 中构建 JWT 认证服务器

    引言 JWT（JSON Web Tokens）是一种用于安全交换信息的开放式标准，它可以在多个服务之间传递认证信息。在构建 Web 应用程序时，往往需要在请求和响应之间进行身份验证，JWT 作为一种有...

    5 小时前
  • 如何使用 ES6 中的数组方法简化代码

    如何使用 ES6 中的数组方法简化代码 随着 JavaScript 语言的发展，ES6 中新增的许多数组方法大大简化了开发人员的编程工作。这些方法可以让我们更容易地处理数据和操作数组，同时大大增加了代...

    5 小时前
  • SPA 开发中前后端分离的优缺点及应用实践

    单页应用（Single Page Application，SPA）是一种现代化的 Web 应用程序开发模式，它的一个特点就是前后端分离。本文将介绍 SPA 开发中前后端分离的优缺点，以及如何实践前后端...

    5 小时前
  • 使用 Enzyme + Jest 测试通过 HOC 形式创建的 React 组件

    在 React 中，高阶组件（Higher Order Component，简称 HOC）是一种非常常见的模式，它允许我们将组件逻辑重用在多个组件之间。使用 HOC 可以让我们更好地管理组件间的复杂度...

    5 小时前
  • PM2 与 Docker：构建可伸缩的 Node.js 应用程序

    前言 在开发现代 Web 应用程序时，Node.js 已成为最受欢迎的开发语言之一。Node.js 可以大力发挥其高度可扩展的架构，以构建高性能的 Web 应用程序。

    5 小时前
  • Material Design 中主题颜色的修改与自定义方法

    Material Design 是 Google 在 2014 年发布的一种全新的平面设计语言，旨在提供一个简洁、明晰、具有层次的用户界面设计风格。该设计语言使用明亮的色彩、深入的阴影效果、多种类型的...

    5 小时前
  • CSS Grid 布局问题集锦

    CSS Grid 布局是一种基于网格的布局系统，可以帮助前端开发人员更轻松地构建自适应、灵活且可复用的界面。尽管 CSS Grid 布局越来越普及，但是仍然存在一些问题需要面对和解决。

    5 小时前
  • 在 TailwindCSS 中实现无限滚动加载的技巧

    随着 Web 应用程序的普及，无限滚动加载成为了越来越流行的设计模式。它可以使用户感到更流畅，避免需要单击“下一页”按钮的情况。在 TailwindCSS 中实现无限滚动加载并不难，但是需要了解一些特...

    5 小时前
  • Redux 和 Immutable 数据结构的集成

    Redux 和 Immutable 数据结构的集成 储存和操作状态是前端应用程序的重要组成部分。Redux 和 Immutable 都是流行的前端技术，它们可以帮助处理状态，并提高应用程序的性能。

    5 小时前
  • ECMAScript 2021 和 React：优化性能的新方法

    前言 前端开发涉及到很多复杂的技术，而随着业界不断提升对用户体验的要求，性能优化也成为了前端开发的重点。ECMAScript 2021 和 React 的新功能在性能优化方面提供了一些新的方法，让开发...

    5 小时前
  • 10个ECMAScript 2019的新特性

    ECMAScript是JavaScript的标准规范，每年都会推出新的版本，提供新的特性和语法糖。2019版的ECMAScript已经发布，本篇文章将详细介绍10个新特性，对前端开发有指导意义。

    5 小时前
  • 如何实现无障碍访问依赖动态内容的应用程序？

    随着互联网技术的发展，越来越多的应用程序需要依赖动态内容来提供用户体验，例如 AJAX 加载、单页应用程序等。然而，这些应用程序往往会给残障人士造成访问困难，导致其无法充分利用这些服务。

    5 小时前
  • 构建高可用的 SPA 应用：浏览器兼容解决方案

    单页应用（Single Page Application，SPA）是现代 Web 开发技术的重要组成部分，它可以提供卓越的用户体验和高效的页面加载速度。但是，由于 Web 浏览器市场的多样性，有时候我...

    5 小时前
  • 在 SASS 中使用媒体查询的正确方法

    在SASS中使用媒体查询的正确方法 作为前端开发人员，我们经常需要针对不同的屏幕尺寸和设备类型来优化我们的网页布局和样式。这时候，媒体查询就成了我们必不可少的工具。

    5 小时前

相关推荐