Contact Form 7 是一个非常强大并且易用的联系表单的插件，我在很多项目中都用到它，但是这个插件有个很不好的地方，会在整个博客的所有前台页面都加载 Contact Form 7 的 JavaScript...和 CSS 代码，对于性能要求极致的我们，当然不允许这样的事情发生，所以我们可以通过下面的代码实现只在含有 Contact Form 7 表单的页面加载 Contact Form 7 的 JS 和 CSS...) $in_footer = false; wp_enqueue_script( 'contact-form-7', wpcf7_plugin_url( 'includes/js/scripts.js...-7'); if(is_page('contact')){ wp_enqueue_style( 'contact-form-7', wpcf7_plugin_url( 'includes/css.../styles.css' ), array(), WPCF7_VERSION, 'all' ); } } 上面的代码假设我们只有一个叫做“contact”的页面添加了联系表单，具体涉及到你自己的项目
assets/：存放未编译的静态资源，比如CSS、JavaScript和图片。在构建时，Nuxt.js会处理这些资源。components/：存储自定义Vue组件，可以复用在应用的不同部分。...静态站点生成（SSG）：使用nuxt generate命令生成静态HTML文件，适用于内容不频繁变动的站点，提高加载速度和SEO友好性。...这些数据会在生成静态页面时被注入到 HTML 中，使页面在客户端加载时无需额外请求： // pages/about.vue export default { async asyncData...8. 404 页面： 设置 generate.fallback 为 true 会为未预渲染的动态路由生成一个404页面，当用户访问这些路由时，Nuxt.js 会尝试在客户端渲染它们。...路由守卫： 使用 beforeRouteEnter 等路由守卫，避免在不需要时加载数据。减少HTTP请求： 合并多个CSS和JS文件，减少HTTP请求数量。
注意：Nuxt.js 会监听 pages 目录中的文件更改，因此在添加新页面时无需重新启动应用程序。 4. 目录结构 ? 5....模板加载和 css 预处理器 默认情况下 Nuxt 使用 vue-loader、file-loader 以及 URL-loader 这几个 Webpack 加载器来处理文件的加载和引用。...nuxt 巧妙地根据页面 pages 目录页面组件文件的路径，自动生成对应的路由配置。并且通过在页面子目录或 .vue 文件名前加下划线 _ 来实现动态路由。...center align-items center text-align center 在配置文件 nuxt.config.js 中 css 属性中添加样式文件，以使新添加的样式文件全局生效:...设计实现业务页面 第6小节中，我们已经创建了一些页面，但还未实现任何界面和业务逻辑。目前，我们已经有了统一的布局，接下来，就是专注特定页面的设计实现了。
在传统的客户端渲染中，浏览器首先下载一个空的 HTML 页面，然后通过 JavaScript 请求数据并生成页面内容。这种方式的优点是可以提供更丰富的交互和动态效果，但也存在一些缺点。...例如，搜索引擎爬虫可能无法正确解析和索引页面内容，导致 SEO（搜索引擎优化）问题。同时，初始加载时用户可能会看到空白的页面或者出现闪烁的内容。...相比之下，服务端渲染通过在服务器上预先生成完整的 HTML 页面，将其发送给客户端浏览器。这样，浏览器在接收到页面时就能够立即显示完整的内容，而不需要等待 JavaScript 的下载和执行。...这样可以提高页面的加载速度和首次渲染速度，并且对于搜索引擎爬虫来说更容易解析和索引页面内容，有利于 SEO。...一些页面或组件可能更适合使用客户端渲染，以提供更好的交互和动态效果。而对于需要更好的首次加载速度和 SEO 的页面，服务端渲染则是一个有价值的选择。
因为 nextjs 和 nuxtjs 这种不仅仅是服务端渲染，它们还是同构框架。 什么是同构呢？就是一份代码既可以跑在浏览器端，也可以跑在服务端。这得益于 NodeJS 在服务端的流行。...传统 jsp、php、django 这些服务端渲染框架都是返回 html 字符串，类似于传统的 MPA 多页面模式。所以切换页面的时候就会刷新，重新请求 css 和 js 文件，用户体验比较差。...如果我在代码里面使用 document.title 的方式动态设置就不会生效，只能通过 JS Bridge 来动态设置头部。...Nuxt 功能还是非常强大的，比如会根据路由动态拆分构建文件、鼠标放到 Nuxt-link 路由组件上面就会预加载 JS 文件等等。...但在客户端渲染里面，由于页面刷新会导致浏览器端重新加载 JS 文件，这个日期也会重新计算。
可以定义一个空白layout：black.vue作为特殊页面的layout。...动态路由 在这个项目中，商品详情页就是动态路由。在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。...（渲染）组件（页面组件，即pages文件夹下的文件，不包含components下的）之前在服务端或路由更新之前被调用，即可以进行异步获取数据并返回当前组件。...–简而言之就是fetch 和 asyncData 在组件上不能用。 Vuex ⚠️在nuxt中，vuex需要导出一个方法。...由于components中没法使用fetch，页面刷新时，middleware已经执行了，此时vuex中是没有参数的，就判断为用户没有登录？
需要注意的是在使用 @nuxtjs/axios 模块时(参照以下文章以了解使用原因) 可以通过 @types 声明它的类型(第三方模块类型声明在后文提及) 博客 Nuxt.js 移植重构与服务端渲染入门实现...之前是因为 Artalk 与其他 js 兼容的问题所以使用了 iframe 方式嵌入评论区，但是由于加载博客页面时需要一段时间等待 iframe 网页端获取评论数据以展示，就会出现加载完成后高度无法被博客页面获取的问题...小小的百度了一下，发现父页面其实可以通过 iframe 元素的 contentWindow 属性来获取到子页面的 document，这样一来就可以获取到子页面文档高度了。...getCommentsHeight() click++ } } } }) ↑ 高度获取实现 逻辑是在快要滑动至底部评论区时请求获取子页面高度并调整父页面评论区高度和大小...但是新评论提交后高度变化并不是即时的也存在数据传输延迟导致不能直接通过父页面的再次请求来获取高度，于是才增加了「开启滑动」按钮来变相解决这个问题哈哈哈哈 CSS 的 Cursor 属性 最近才发现可以通过
可以定义一个空白layout：black.vue作为特殊页面的layout。...动态路由 在这个项目中，商品详情页就是动态路由。在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。...（渲染）组件（页面组件，即pages文件夹下的文件，不包含components下的）之前在服务端或路由更新之前被调用，即可以进行异步获取数据并返回当前组件。...--简而言之就是fetch 和 asyncData 在组件上不能用。 Vuex ⚠️在nuxt中，vuex需要导出一个方法。...由于components中没法使用fetch，页面刷新时，middleware已经执行了，此时vuex中是没有参数的，就判断为用户没有登录？
SSR对SEO的支持非常好，以前用vue做的SPA（单页应用）对搜索引擎是不友好的，搜索引擎不好抓取单页应用；相对比SPA加载速度快，SSR是直接将html字符串传给浏览器。...Nuxt.js的特点 自动代码分层； 服务端渲染； 强大的路由功能，支持异步数据； 静态文件服务； ES6/ES7语法支持； 打包压缩js和css； HTML头部标签管理； 本地开发支持热加载； 集成...可以在这个生命周期中进行用户是否登录判断；可全局nuxt.config.js进行配置、可在页面组件中配置（layout）、也可在布局组件中配置（page&children） // nuxt.config.js...(pages)中使用个，components中不能使用每次加载之前被调用。...Nuxtjs：https://nuxtjs.org/
在VuePress中，你可以使用Markdown编写文档，然后生成网页，每一个由VuePress生成的页面都带有预渲染好的HTML，也因此具有非常好的加载性能和搜索引擎优化。...同时，一旦页面被加载，Vue将接管这些静态内容，并将其转换成一个完整的单页应用，其他的页面则会只在用户浏览到的时候才按需加载。...获得热重新加载和Node.js的所有功能。 Gridsome让搭建筑网站再次变得有趣。如果你想建个博客站，可以考虑下。...首先只加载关键的HTML，CSS和JavaScript。然后预取下一页，以便用户可以非常快速地点击，而无需重新加载页面，即使在离线时也是如此。...官方地址：https://gridsome.org/ 4、Vuex 在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在
同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。...获得热重新加载和Node.js的所有功能。Gridsome让搭建网站再次变得有趣。如果你想建个博客站，可以考虑下。其特点如下： 使用Vue.js，webpack和Node.js等现代工具构建网站。...首先只加载关键的HTML，CSS和JavaScript。然后预取下一页，以便用户可以非常快速地点击，而无需重新加载页面，即使在离线时也是如此。...04 Vuex https://vuex.vuejs.org/ 在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在...05 Nuxt https://nuxtjs.org/ Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性
在SSR中，前端分成2部分：前端客户端、前端服务端 前端服务端，用于发送ajax，获得数据 前端客户端，用于将ajax数据和页面进行渲染，渲染成html页面，并响应给调用程序（浏览器、爬虫）...1.4 SPA和SSR对比 SPA单页应用程序 SSR服务器端渲染 优势 1.页面内容在客户端渲染 2....劣势 1.首屏加载缓慢 2.SEO(搜索引擎优化)不友好 1.更多的服务器端负载 2.涉及构建设置和部署的更多要求，需要用Node.js渲染 3.开发条件有限制，一些生命周期将失效 4.一些常用的浏览器...pages/user.vue 文件 【优先级高】 pages/user/index.vue 文件 4.3 动态路由 在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的...fetch 在渲染页面之前获取数据填充应用的状态树（store） head 配置当前页面的head标签，整合第三方css、js等。
在实际场景中，总有一些不按常理的操作，页面因此无法展示真正想要的效果，使用该方法进行错误提示还是有必要的。...一般在 asyncData 会对主要页面数据进行预先请求，获取到的数据会交由服务端拼接成 html 返回前端渲染，以此提高首屏加载速度和进行 seo 优化。...举个例子： 现在有两个页面，分别是首页和详情页，它们都有设置 asyncData。进入首页时，asyncData 运行在服务端。...validate Nuxt.js 可以让你在动态路由对应的页面组件中配置一个校验方法用于校验动态路由参数的有效性。 在验证路由参数合法性时，它能够帮助我们，第一个参数为 context。...，是因为一些页面会新开标签页，导致 vuex 中的信息丢失，这里需要判断一下重新设置状态树。
它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换时，打断用户体验。...在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源，并添加到页面。...在MPA中，每个页面都是一个独立的主页面。当我们在访问另一个页面的时候，都需要重新加载html、css、js文件，公共文件则根据需求按需加载。...优点 具有桌面应用的即时性、网站的可移植性和可访问性；内容的改变不需要重新加载整个页面；良好的前后端分离，分工更明确 首屏加载较快，SEO优化较好。...缺点 不利于搜索引擎的抓取；首次渲染速度相对较慢(加载整个项目使用的css、js) 页面跳转较慢 参考链接： 说说你对SPA的理解 https://vue3js.cn/interview/vue/spa.html
【1】、nuxtJs的安装 【2】、nuxtJs的路由 今天咱们来学习一下，SSR（服务器端渲染）的nuxt.js框架 和nuxt框架 --> SPA（单页应用）不利于搜索引擎的SEO操作， 特别是百度根本没法抓取到SPA的内容页面， 1....普通的页面，先获取文件，再读取内容， 读取到ajax的js的时候，再向服务器发送请求，获取内容。 这就是至少二次对服务器的请求了。 如果是ssr，直接就是在服务端渲染为完整的页面， 发送到浏览器了。...打包和压缩 JS 和 CSS HTML头部标签管理 本地开发支持热加载 集成ESLint 支持各种样式预处理器：SASS、LESS、 Stylus等等 <!...里面进入你刚才建的目录里， npx create-nuxt-app 项目名(不能有大写字母) 5、在安装过程中，安装程序会问你一些问题， 例如，项目名 项目说明 项目的作者 你用什么第三方框架
在SSR中，前端分成2部分：前端客户端、前端服务端 前端服务端，用于发送ajax，获得数据 前端客户端，用于将ajax数据和页面进行渲染，渲染成html页面，并响应给调用程序（浏览器、爬虫） 如果爬虫获得...1.4 SPA和SSR对比 SPA单页应用程序 SSR服务器端渲染 优势 1.页面内容在客户端渲染2....劣势 1.首屏加载缓慢2.SEO(搜索引擎优化)不友好 1.更多的服务器端负载2.涉及构建设置和部署的更多要求，需要用Node.js渲染3.开发条件有限制，一些生命周期将失效4.一些常用的浏览器API...在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。...fetch 在渲染页面之前获取数据填充应用的状态树（store） head 配置当前页面的 Meta 标签 layout 指定当前页面使用的布局 transition 指定页面切换的过渡动效 scrollToTop
特性 基于 Vue.js 自动代码分层 服务端渲染 强大的路由功能，支持异步数据 静态文件服务 ES2015+ 语法支持 打包和压缩 JS 和 CSS HTML 头部标签管理 本地开发支持热加载 集成...在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。...要指定页面的命名视图，我们需要在nuxt.config.js文件中扩展路由器配置： export default { router: { extendRoutes (routes, resolve...此配置示例中的命名视图名称为 top 。 中间件 中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。 每一个中间件应放置在 middleware/ 目录。...在服务器端和客户端都可以使用生命周期钩子：created beforeCreated nuxt默认服务器端渲染，可以配置spa的模式启动： 在package.json中scripts中添加： 'start-spa
从性能的角度看，在现代浏览器中单页面Web App已经能够和普通native应用程序相媲美，而且几乎所有的操作系统都支持现代的浏览器。...但是从DOMContentLoaded来看，首页事实上页面响应比较迅速，所以这个加载结束后页面第一屏便渲染结束，然后再异步加载js，当js改变后再动态改变dom结构中的一些关键点 这个时候一个静态HTML...页面，装载首屏的基本内容，让首页快速显示 然后js加载结束后会马上重新渲染整个页面，这个样子，用户就可以很快的看到页面响应，给用户一个快的错觉，给人感觉快得多。...以框架库为例，除了核心包以外，不需要的UI或者功能库可以剔除，用到了再动态加载，减少首次加载量，这个一开始就得做好，做不好后期就不好改 以业务团队为例，首次加载的js与html模板会将常用的几个页面压缩合并...，但是我们只能缓存非敏感信息， 产品搜索页至列表页的请求数据会缓存30s-60s，若是过期时间内用户回到列表页的话不会重新请求数据 这对服务器压力，页面响应皆是有利的，这个在30s内事实上意义不大，可以减少一次请求
web页面中，仅在该web页面初始化时加载相应html,js和css,一旦页面加载完成，spa不会因为用户的操作而进行页面的重新加载或跳转，而是利用js动态的变换html的内容，从而实现ui与用户的交互...，原理是： js会感知到url的变化，通过这一点，可以用js动态的将当前的页面内容清除掉，然后将下一个页面的内容挂载到当前页面上，就是所谓的路由，通过路由判断页面应该显示的组件，这种过程就是单页面应用...，每次跳转不请求html文件，而是通过路由跳转来渲染组件 优点： 页面切换快，良好的交互体检，因为每次切换页面时，不需要重新加载整个页面，不需要做html文件的请求，这样就节约了很多http发送时延，获取数据也是通过...js,css,图片 解决方案： vue-router懒加载 vue懒加载就是按需加载，只有当路由被访问时才会加载对应的组件，而不是在加载首页的时候就加载，项目越大，对首屏的速度提升就越明显...，不认识js的内容，而单页面应用的内容都是考js渲染生成出来的，搜索引擎不识别这部分内容，所以就不会给一个好排名，导致单页面应用做出来的网页在百度和谷歌上的排名差 解决方法： 服务端渲染， 服务器合成完整的
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
