博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
nuxt 简单介绍
阅读量:5833 次
发布时间:2019-06-18

本文共 1291 字,大约阅读时间需要 4 分钟。

背景

由于面试总被问到关于ssr的问题,于是自己想搞一套服务端渲染。后来发现直接手动配置会有很多坑,与前端的朋友交流,给我推荐了nuxt,下面将研究的初步了解记录下来。

简介

Nuxt是基于Vue的一个应用框架,采用服务端渲染,使你的SPA应用(Vue)也可以拥有SEO。

实践

1. 创建项目

$ npm install -g vue-cli$ vue init nuxt/starter 
$ cd
$ npm install$ npm run dev

2. 项目目录

|-- assets // 用于组织未编译的静态资源如LESS、SASS或JavaScript
|-- components // 用于自己编写的Vue组件,比如波动组件、日历组件、分页组件
|-- layouts // 布局目录,用于组织应用的布局组件,不可更改
|-- middleware // 用于存放中间件
|-- pages // 用于存放写的页面,我们主要的工作区域
|-- plugins // 用于存放JavaScript插件的地方
|-- static // 用于存放静态资源文件,比如图片
|-- store // 用于组织应用的Vuex 状态管理
|-- .editorconfig // 开发工具格式配置
|-- .eslintrc.js // ESLint的配置文件,用于检查代码格式
|-- .gitignore // 配置git不上传的文件
|-- nuxt.config.json // 用于组织Nuxt.js应用的个性化配置,已覆盖默认配置
|-- package-lock.json // npm自动生成,用于帮助package的统一设置的,yarn也有相同的操作
|-- package.json // npm 包管理配置文件

原理

Nuxt.js 通过一系列构建于 Vue.js 之上的方法进行服务端渲染,具体流程如下:

调用 nuxtServerInit 方法

当请求打入时,最先调用的即是 nuxtServerInit 方法,可以通过这个方法预先将服务器的数据保存,如已登录的用户信息等。另外,这个方法中也可以执行异步操作,并等待数据解析后返回。

Middleware 层

经过第一步后,请求会进入 Middleware 层,在该层中有三步操作:

读取 nuxt.config.js 中全局 middleware 字段的配置,并调用相应的中间件方法 匹配并加载与请求相对应的 layout 调用 layout 和 page 的中间件方法

调用 validate 方法

在这一步可以对请求参数进行校验,或是对第一步中服务器下发的数据进行校验,如果校验失败,将抛出 404 页面。

调用 fetch 及 asyncData 方法

这两个方法都会在组件加载之前被调用,它们的职责各有不同, asyncData 用来异步的进行组件数据的初始化工作,而 fetch 方法偏重于异步获取数据后修改 Vuex 中的状态。

转载地址:http://sjrdx.baihongyu.com/

你可能感兴趣的文章
Breaking parallel loops in .NET C# using the Stop method z
查看>>
修改故障转移群集心跳时间
查看>>
[轉]redis;mongodb;memcache三者的性能比較
查看>>
微软职位内部推荐-Sr DEV
查看>>
让你的WPF程序在Win7下呈现Win8风格主题
查看>>
802.11 学习笔记
查看>>
Leetcode-Database-176-Second Highest Salary-Easy(转)
查看>>
构建Docker Compose服务堆栈
查看>>
最小角回归 LARS算法包的用法以及模型参数的选择(R语言 )
查看>>
Hadoop生态圈-Kafka常用命令总结
查看>>
如何基于Redis Replication设计并实现Redis-replicator?
查看>>
浮点数内存如何存储的
查看>>
贪吃蛇
查看>>
EventSystem
查看>>
用WINSOCK API实现同步非阻塞方式的网络通讯
查看>>
玩一玩博客,嘿嘿
查看>>
P1352 没有上司的舞会
查看>>
ios11文件夹
查看>>
【HLOJ 559】好朋友的题
查看>>
Electric Fence(皮克定理)
查看>>