1 服务端渲染技术NUXT
一.什么是服务端渲染
- 服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容,而不是在客户端通过AJAX获取数据。
- 与传统 SPA(Single-Page Application - 单页应用程序)相比,服务器端渲染(SSR)的优势主要在于:更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
二.什么是NUXT
- Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。
- 官网网站:
https://zh.nuxtjs.org/
三.NUXT环境搭建
- 我们从网站上下载模板的压缩包 starter-template-master.zip 解压,修改template目录目录的package.json中的名称
- 在命令提示符下进入该目录下的template目录
- 安装依赖
- 修改package.json
- 修改nuxt.config.js
- 测试运行
四.NUXT目录结构
- 资源目录 assets
用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。 - 组件目录 components
用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件,即这些组件不会像页面组件那样有 asyncData 方法的特性。 - 布局目录 layouts
用于组织应用的布局组件。 - 页面目录 pages
用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。 - 插件目录 plugins
用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。 - nuxt.config.js 文件
nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置,以便覆盖默认配置。
五.NUXT快速入门
- 定义布局
我们通常的网站头部和尾部都是相同的,我们可以把头部为尾部提取出来,形成布局页
修改layouts目录下default.vue
<nuxt/>为内容的区域 - 页面路由
在page目录创建文件夹
recruit目录创建index.vue
gathering目录创建index.vue
NUXT的路由是根据目录自动生成的,无需手写。
修改default.vue,header中添加导航链接
点击导航链接,测试路由效果 - 数据渲染
- 安装axios,用于异步获取数据
- 修改gathering目录的index.vue
asyncData是用于异步加载数据的方法
- 安装axios,用于异步获取数据
- 动态路由
如果我们需要根据ID查询活动详情,就需要使用动态路由。NUXT的动态路由是以下划线开头的vue文件,参数名为下划线后边的文件名
创建pages/gathering/item/_id.vue
我们在地址栏输入 http://localhost:3000/gathering/item/1 即可看到运行结果
在活动列表页点击链接进入详情页
目前 nuxt‐link 的作用和 router‐link 一致 ,都是进行路由的跳转。