Nuxt.js学习|青训营笔记

127 阅读3分钟

这是我参与「第五届青训营」伴学笔记创作活动的的第11天 (❤ ω ❤)

image.png

关于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/

用来存放可选为被注册的插件。