SSR服务端渲染
之前用vue做项目时,在浏览器中查看网页源码,是没有具体内容的,只有一个标签,用服务端渲染的话,查看网页源码数据都会显示出来,所以有利于SEO,能够被搜索到。
Nuxt.js是做Vue SSR的框架,基于vue 2,
包含了vue-router,(vue本身不带路由,是通过插件的方式做路由,把vue-router的配置变得非常简单,甚至不用配就能用)
支持vuex,(跨组件的状态管理工具)
支持vue-server-render,
支持vue-meta。
安装
官网安装方式:npx create-nuxt-app nuxt-learn
vue init nuxt-community/koa-template nuxt-learn
nrm ls:查看npm配置
nrm use npm(切换安装源)
安装注意事项:
在选择你想要的Nuxt模式(universal or SPA)时,选universal
nuxt.js目录:
REAMD.md
assets:资源目录
components:组件目录
layouts:布局目录
middleware:中间件目录
pages:页面目录,页面入口
plugins:插件目录
static:静态文件目录
backpack.config.js
build
node_modules
nuxt.config.js
package-lock.json
package.json
server,放置koa相关的程序
store,放置vuex
路由
页面模板(layouts)
异步数据,SSR剖析
vuex应用
注意事项
mounted()不会在服务器端执行,只会在浏览器端执行,
asyncData()请求异步数据,服务器端把编译好的内容下发给你,把异步获取到的数据也同时扔给浏览器端,
用fetch()主要用来处理和vuex相关的事情,asyncData()是用来处理组件的数据