谈谈你对 SPA的理解
- 谈谈你对 SPA的理解
- SPA
- MPA
- SPA与MPA的优缺点
- 总结 SPA优点
- 解决方案
- 扩展
- vue如何实现静态页面预渲染
- 如何使用NuxtJs
谈谈你对 SPA的理解
SPA
SPA (single-page application)单页应用。
默认情况下我们编写Vue、React都只有一个html 页面，并且提供一个挂载点，最终打包后会再此页面中引入对应的资源。
页面的渲染全部是由jS 动态进行染的。
切换页面时通过监听路由变化，渲染对应的页面。
客户端渲染: client Side Rendering，客户端渲染 CSR
MPA
MPA(Multi-page application)多页应用，多个html页面。
每个页面必须重复加载，js，css 等相关资源。
服务端返回完整的 html，同时数据也可以再后端进行获取一并返回“模板引擎”》。
多页应用跳转需要整页资源刷新。
服务器端渲染: Server Side Rendering，服务器端渲染 SSR
如何分清在哪渲染:
- HTML是在前端动态生成的“客户端染”，
- HTML在服务端处理好并返回的是“服务端渲染“。
更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。
SPA与MPA的优缺点
总结 SPA优点
- 用户体验好、快，内容的改变不需要重新加载整个页面，服务端压力小。
- SPA应用不利于搜索引擎的抓取
- 首次渲染速度相对较慢 (第一次返回空的 html，!需要再次请求首屏数据)白屏时间长
解决方案
- 静态页面预渲染(Static site Generation)SSG，在构建时生成完整的 html页面。(就是在打包的时候，先将页面放到浏览器中运行一下，将HTML保存起来)，仅适合静态页面网站。变化率不高的网站
- SSR+CSR的方式，首屏采用服务端渲染的方式，后续交互采用客户端渲染方式。NuxtJs
扩展
vue如何实现静态页面预渲染
在Vue中实现静态页面预渲染的示例，可以使用Vue CLI提供的插件vue-cli-plugin-prerender-spa。
以下是一个简单的示例步骤：
-
首先，确保你已经全局安装了Vue CLI。如果没有，可以运行以下命令进行安装：
npm install -g @vue/cli
-
创建一个新的Vue项目。可以运行以下命令并按照提示进行配置：
vue create my-project
-
进入项目目录：
cd my-project
-
安装预渲染插件vue-cli-plugin-prerender-spa：
vue add prerender-spa
-
安装完成后，会出现一些配置选项，比如需要预渲染的路由、要排除的路由等。根据项目需求进行配置。
-
在src/main.js文件中，将new Vue()的实例化过程包裹在一个条件语句中，以便只在预渲染时实例化Vue应用程序：
if (typeof window !== 'undefined') { new Vue({ // ...Vue实例的配置 }).$mount('#app'); } -
在package.json文件中添加一个自定义脚本，用于执行预渲染：
"scripts": { "prerender": "vue-cli-service prerender", // ... } -
运行预渲染脚本，生成静态HTML文件：
npm run prerender
-
完成后，在项目根目录下会生成一个dist文件夹，其中包含了预渲染的静态HTML文件。
这只是一个简单的示例，实际上还可以进行更多的配置，如页面标题、meta标签等。你可以根据具体需求和文档进一步了解和定制预渲染插件的功能。
在预渲染过程中，动态加载的内容（如异步数据、用户交互等）可能无法被预渲染，因此需要在Vue组件中注意处理这些情况，以确保预渲染结果的准确性。
如何使用NuxtJs
要使用Nuxt.js，您可以按照以下步骤进行操作：
-
安装Node.js：首先，确保您的计算机上已安装Node.js。您可以从官方网站（https://nodejs.org）下载并安装适用于您操作系统的版本。
-
创建一个新的Nuxt.js项目：打开命令行工具，并导航到您想要创建项目的目录中。然后运行以下命令来创建一个新的Nuxt.js项目：
npx create-nuxt-app
-
配置项目选项：在创建项目时，您将被提示选择一些项目选项，例如UI框架、测试工具等。根据您的需求进行选择，或者直接按回车键使用默认选项。
-
安装依赖项：项目创建完成后，进入新创建的项目目录，并运行以下命令来安装所有必需的依赖项：
cd npm install
- 运行开发服务器：安装完成后，运行以下命令启动开发服务器：
npm run dev
这将启动一个本地开发服务器，并在浏览器中打开一个新窗口，显示您的Nuxt.js应用程序。
- 开始编写代码：现在，您可以在项目目录中的pages目录中创建Vue组件来构建您的应用程序页面。您还可以使用Nuxt.js提供的其他功能，如路由系统、插件、中间件等来定制和扩展您的应用程序。
这只是一个快速入门指南，以帮助您开始使用Nuxt.js。要了解更多关于Nuxt.js的详细信息，请参阅官方文档（https://nuxtjs.org）。
-
