Vue.js 是一个流行的 JavaScript 前端框架，可以用于实现多种类型的应用程序。其中，多页面应用（MPA）和单页面应用（SPA）是两种常见的应用程序类型。本文将介绍如何使用 Vue.js 实现这两种应用程序类型。
多页面应用（MPA）
多页面应用是指一个应用程序包含多个页面，每个页面都是一个独立的 HTML 文件。这种应用程序类型通常用于传统的 Web 应用程序，用户在不同的页面之间进行导航。
Vue.js 支持 MPA，可以使用 Vue CLI 创建一个多页面应用程序。以下是创建一个名为 my-mpa 的多页面应用程序的示例代码：
vue create my-mpa
在创建过程中，选择 Manually select features，然后选择 Babel、Router、Vuex 和 CSS Pre-processors。在 Router 的配置中，选择 Multiple pages。这将创建一个包含多个页面的应用程序。
在创建完成后，可以在 src 目录下创建多个页面。例如，创建一个名为 index.html 的页面，并在其中添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- --- --- - ------------
-------
------
---- ---------------
------- -----------------------
-------
-------在这个页面中，我们可以看到一个名为 app 的 div 元素，这是我们将要用 Vue.js 渲染的地方。还有一个名为 home.js 的 JavaScript 文件，这是我们将要编写的 Vue.js 代码。
在 home.js 中，我们可以编写以下代码：
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')这个代码片段创建了一个新的 Vue 实例，并将 App 组件渲染到 app 元素中。
在这个示例中，我们只创建了一个页面，但是我们可以创建多个页面，并在每个页面中使用不同的 JavaScript 文件。
单页面应用（SPA）
单页面应用是指一个应用程序只有一个页面，所有的内容都是通过 JavaScript 动态加载的。这种应用程序类型通常用于 Web 应用程序，用户在一个页面中进行交互。
Vue.js 是一个非常流行的单页面应用程序框架，可以使用 Vue CLI 创建一个单页面应用程序。以下是创建一个名为 my-spa 的单页面应用程序的示例代码：
vue create my-spa
在创建过程中，选择 Manually select features，然后选择 Babel、Router、Vuex 和 CSS Pre-processors。在 Router 的配置中，选择 Single page app。
在创建完成后，我们可以在 src 目录下创建一个名为 App.vue 的文件。在这个文件中，我们可以添加以下代码：
-- -------------------- ---- -------
----------
-----
------ --- --------
---------------------------
------
-----------
--------
------ ------- -
----- -----
-
---------这个代码片段定义了一个名为 App 的 Vue 组件，其中包含一个 h1 元素和一个 router-view 元素。router-view 元素用于渲染路由对应的组件。
在创建完成后，我们可以在 src 目录下创建多个路由组件。例如，创建一个名为 Home.vue 的路由组件，并在其中添加以下代码：
-- -------------------- ---- -------
----------
-----
-------------
---------- -- -- --- --------
------
-----------
--------
------ ------- -
----- ------
-
---------这个代码片段定义了一个名为 Home 的路由组件，其中包含一个 h2 元素和一个 p 元素。
在这个示例中，我们只创建了一个路由组件，但是我们可以创建多个路由组件，并在路由配置中定义路由。
在 src 目录下创建一个名为 router.js 的文件，并在其中添加以下代码：
-- -------------------- ---- -------
------ --- ---- -----
------ ------ ---- ------------
------ ---- ---- ------------------
---------------
------ ------- --- --------
----- ----------
------- -
-
----- ----
----- -------
---------- ----
-
-
--这个代码片段定义了一个名为 router 的 Vue Router 实例，其中包含一个名为 home 的路由，对应的组件是 Home 组件。
最后，在 main.js 中，我们可以编写以下代码：
-- -------------------- ---- ------- ------ --- ---- ----- ------ --- ---- ----------- ------ ------ ---- ---------- ------------------------ - ----- --- ----- ------- ------- - -- ------ -----------------
这个代码片段创建了一个新的 Vue 实例，并将 App 组件渲染到 app 元素中。我们还将 router 实例传递给 Vue 实例，这样在路由切换时，Vue.js 将自动加载对应的组件。
总结
在本文中，我们介绍了如何使用 Vue.js 实现多页面应用和单页面应用。在多页面应用中，我们可以创建多个 HTML 文件，并在每个文件中使用不同的 JavaScript 文件。在单页面应用中，我们只有一个 HTML 文件，并使用 JavaScript 动态加载内容。无论是哪种应用程序类型，Vue.js 都是一个非常强大的前端框架，可以帮助我们快速开发高质量的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f3508f2b3ccec22fbd2932