无事来学学--服务渲染技术Nuxt了解引入｜8月更文挑战

GTW_Zeus
258 阅读2分钟

这是我参与8月更文挑战的第16天，活动详情查看：8月更文挑战”

什么是服务端渲染

SSR (Server Side Render)是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。

优势：

主要在于：更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再进行页面内容的抓取。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题

可以获得更快的内容到达时间(time-to-content)，无需等待所有的 JavaScript都完成下载并执行，产生更好的用户体验，对于那些内容到达时间(time-to-content)与转化率直接相关的应用程序而言，服务器端渲染(SSR)至关重要。

小拓展

seo是一种网站优化技术，也被叫做搜索引擎优化，可以利用搜索规则提高网站上有关搜索的自然排名，主要表现为微博热搜控榜等。通过seo技术，可以实现一系列的商业行为，对产品品牌进行宣传收益。”

Nuxt是什么？

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

Nuxt使用（整合elementUI）

  1. 下载压缩包 github.com/nuxt-commun… 将template中的内容复制到 工程目录中 修改package.json中name、description、author内容

  2. 在编辑器终端中进入项目目录安装依赖 npm install

npm run dev 就可以启动了

引入Element-ui 终端中进入项目安装依赖 npm install element-ui

2.创建plugin文件夹，在该文件中编写myplugin.js文件信息

import Vue from 'vue'
import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI
  1. 在nuxt.config.js文件中使用myPlugin.js
 plugins: [
    { src: '~/plugins/myPlugin.js', ssr: false }
  ]
  1. 最后npm run dev
avatar
文章
阅读
粉丝