1. Nuxt.js 概述
1.1 做过的SPA
-
SPA(single page web application)单页 Web 应用,Web 不再是一张张页面,而是一个整体的应用,一个由路由系统、数据系统、页面(组件)系统等等,组成的应用程序。
-
我们之前学习的Vue就是SPA中的佼佼者。
-
SPA 应用广泛用于对SEO要求不高的场景中
1.2 什么是SEO
-
SEO:搜索引擎优化(Search Engine Optimization), 通过各种技术(手段)来确保,我们的Web内容被搜索引擎最大化收录,最大化提高权重,最终带来更多流量。
-
非常明显,SPA程序不利于SEO
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WuScEyK4-1639401759526)(assets/image-20210428084608523.png)]
-
SEO解决方案:提前将
页面和数据
进行整合- 前端:采用SSR
- 后端:页面静态化 (freemarker 、thymeleaf、velocity)
1.3 什么是SSR技术
-
服务端渲染(Server Side Render),即:网页是通过服务端渲染生成后输出给客户端。
- 在SSR中,前端分成2部分:前端客户端、前端服务端
- 前端服务端,用于发送ajax,获得数据
- 前端客户端,用于将ajax数据和页面进行渲染,渲染成html页面,并响应给调用程序(浏览器、爬虫)
-
如果爬虫获得html页面,就可以启动处理程序,处理页面内容,最终完成SEO操作。
1.4 SPA和SSR对比
SPA单页应用程序 | SSR服务器端渲染 | |
---|---|---|
优势 | 1.页面内容在客户端渲染 2. 只关注View层,与后台耦合度低,前后端分离 3.减轻后台渲染画面的压力 | 1.更好的SEO,搜索引擎工具可以直接查看完全渲染的画面 2.更快的内容到达时间 (time-to-content),用户能更快的看到完整渲染的画面 |
劣势 | 1.首屏加载缓慢 2.SEO(搜索引擎优化)不友好 | 1.更多的服务器端负载 2.涉及构建设置和部署的更多要求,需要用Node.js渲染 3.开发条件有限制,一些生命周期将失效 4.一些常用的浏览器API无法使用 |
1.5 什么是Nuxt.js
- Nuxt.js 是一个基于 Vue.js 的通用应用框架。
- 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI 渲染。
- Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。
2 入门案例
2.1 create-nuxt-app 介绍
-
Nuxt.js 提供了脚手架工具
create-nuxt-app
-
create-nuxt-app
需要使用npx
-
npx 命令为 NPM版本5.2.0默认安装组件
2.2 安装
npx create-nuxt-app <project-name>
- 例如
npx create-nuxt-app demo_nuxt02
- nuxtjs改善
2.3 启动
npm run dev
~~~ ![在这里插入图片描述](https://img-blog.csdnimg.cn/665f892dcecc43be842e5901841215b5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAenpsbF9mb3JldmVy,size_14,color_FFFFFF,t_70,g_se,x_16)
## 2.4 访问
http://localhost:3000
![在这里插入图片描述](https://img-blog.csdnimg.cn/4799e1797bed4c60aa052222b14ed110.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAenpsbF9mb3JldmVy,size_20,color_FFFFFF,t_70,g_se,x_16)
# 3. 目录结构
## 3.1 目录
| 目录名称 | 描述 |
| -------------- | ------------------------------------------------------------ |
| assets | 资源目录,用于存放==需要编译==的静态资源。例如:LESS、SASS等 <br/>默认情况下,Nuxt使用Webpack若干加载器处理目录中的文件 |
| components | vue组件目录,Nuxt.js 不会增强该目录,及不支持SSR |
| layouts | 布局组件目录 |
| pages | 页面目录,所有的vue视图,nuxt根据目录结构自动生成对应的路由。 |
| plugins | 插件目录 |
| static | 静态文件目录,==不需要编译==的文件 |
| store | vuex目录 |
| nuxt.config.js | nuxt个性化配置文件,内容将覆盖默认 |
| package.json | 项目配置文件 |
![在这里插入图片描述](https://img-blog.csdnimg.cn/8b432d2de4324d26a9f5b101649e85ec.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAenpsbF9mb3JldmVy,size_20,color_FFFFFF,t_70,g_se,x_16)
## 3.2 别名
* assets 资源的引用:~ 或 @
// HTML 标签
// CSS
background-image: url(~assets/13.jpg);
background-image: url(~/assets/13.jpg);
background-image: url(@/assets/13.jpg);
* static 目录资源的引用:/ 直接引用
//html标签
//css
background-image: url(/12.jpg);
* 实例
~~~vue
<template>
<div>
<!-- 引用 assets 目录下经过 webpack 构建处理后的图片 -->
<img src="~assets/13.jpg" style="height:100px;width:100px;" alt="">
<!-- 引用 static 目录下的图片 -->
<img src="/12.jpg" style="height:100px;width:100px;" alt="">
<!-- css -->
<div class="img1"></div>
<div class="img2"></div>
</div>
</template>
<script>
export default {
}
</script>
<style>
.img1 {
height: 100px;
width: 100px;
background-image: url(~assets/13.jpg);
background-size: 100px 100px;
display: inline-block;
}
.img2 {
height: 100px;
width: 100px;
background-image: url(/12.jpg);
background-size: 100px 100px;
display: inline-block;
}
</style>