Nuxt.js学习

时间:2022-06-11 21:30:10

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