Nuxt.js学习

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

github地址

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()是用来处理组件的数据