这是我参与「第五届青训营」伴学笔记创作活动的的第11天 (❤ ω ❤)
关于SSR 服务端渲染
Server Side Rendering(服务端渲染):
后端先调用数据库,获得数据之后,将数据和页面元素进行拼接,组合成完成的html页面,在直接返回给浏览器,供用户浏览. 目的是: 为了解决单页面应用的 SEO 的问题,对于一般网站影响不大,但是对于论坛类,内容类网站来说是致命的,搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信息。
SSR 还适用以下场景:
1、客户端的网络比较慢
2、客户端运行在老的或者直接没有 JavaScript 引擎上
关于BSR 客户端渲染
客户端渲染:
数据由浏览器通过ajax动态取得,在通过js将数据填充到dom元素上最终展示到网页上.
动态的通过js生成页面进行渲染
NUXT
NUXT.JS:一个简便的vue框架,最常用的就是用来作SSR(服务器端渲染),就相当于vue服务器端渲染.
Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 来处理代码的自动化构建工作(如打包、代码分层、压缩等等).
Nuxt.js:适合做新闻、博客、电影、咨询等需要搜索引擎提供流量的项目。
-
优点
-
基于 Vue.js
-
自动代码分层
-
服务端渲染
-
强大的路由功能,支持异步数据
-
静态文件服务
-
ES6/ES7 语法支持
-
打包和压缩 JS 和 CSS
-
HTML头部标签管理
-
本地开发支持热加载
-
集成ESLint(js验证工具)
-
支持各种样式预处理器: SASS、LESS、 Stylus等
-
各种配置文件
.gitignore
如果一些目录不需要使用git管理,就把它的名称写到这里面,比如需要下载的node_modules和自动生成的.nuxt、.output就不需要放上去浪费资源。
package.json
这个文件用来选择配置项目的各个依赖。
nuxt.config.ts
.ts是它的拓展名,拓展名还可以是.js、.mjs。 这里面编写的配置用来修改Nuxt的默认配置,这位更是重量级,像是创建环境变量、修改组件导入啥的配置都是在这里编写的。
app.config.ts
创建令牌,模块热更新,各种响应式配置在这里编写。扩展名和上面一样。
.gitignore
如果一些目录不需要使用git管理,就把它的名称写到这里面,比如需要下载的node_modules和自动生成的.nuxt、.output就不需要放上去浪费资源。
package.json
这个文件用来选择配置项目的各个依赖。
nuxt.config.ts
.ts是它的拓展名,拓展名还可以是.js、.mjs。 这里面编写的配置用来修改Nuxt的默认配置,这位更是重量级,像是创建环境变量、修改组件导入啥的配置都是在这里编写的。
app.config.ts
创建令牌,模块热更新,各种响应式配置在这里编写。扩展名和上面一样。
components/
用来存放编写的所有Vue组件,在这里面的组件会被Nuxt自动导入可以在任何地方直接使用它。文件名默认为components/下的路径+文件名去除重读片段组成的,如果想要用文件名作为组件名需要在app.config修改。
Nuxt还支持一种动态导入或者叫惰性加载组件的方法,只需要在组件名的前面加上一个Lazy就可以了,这样组件就会在用到它的时候才进行加载。
pages/
里面存放的是各个页面组件,这些将会通过路由来进行选择。
app.vue
这个文件也是用脚手架创价的实例中默认自带的,如果没有pages/,Nuxt就不会使用路由的方式,而是着重这个文件。
plugins/
用来存放可选为被注册的插件。