1、简介
Vue ssr框架。支持vue2,vue-router,vuex,vue server render, vue meta
2、基本使用:
vue init nuxt-community/koa-template //基于koa2的安装
接着cnpm i
npm run dev开启服务
观察Nuxt.js目录:
pages入口页面组件
在page中的vue模板文件名称都是路径
创建完成后即可在相应路由处访问,无需手动配置路由
查看相应页面我们发现系统还自动配置了一行文字
来源于layouts中的模板文件,里面存放着公共的组件,比如说需要在所有路由下都显示的头部,尾部,侧边栏等
每新建一个组件,都会自动添加相应的组件
pages中的页面组件会放到layouts内模板组件中的nuxt标签内
自定义一个简单的layout模板
这样我们在pages下模板使用时在script标签下export default内声明
layout:'your layouts name'
nuxt.config.js是nuxtjs的配置文件,
可以配置全局的css文件
nuxt获取异步数据
server目录创建interface接口目录
目录下创建接口文件:
接着在server文件夹下入口文件index.js中引入
import name from '...'
同一文件下接着书写:
即可
接着可在模板文件中使用:
这里未配置ssr客户端渲染,是我们的页面在页面加载完后再向服务器发起请求:
为了实现在下发资源的同时进行渲染,我们修改:
这样会把数据和编译好的内容一并返回给浏览器
fetch主要用于处理vuex相关的数据
vuex结合使用nuxtjs
方法与单独使用nuxtjs类似
在路由index.js入口文件书写:
此时,vuex已经可以运行,如果不行,请重启服务。
也是实现了ssr
在此总结nuxt目录下各个子目录的作用
components:写页面组件
assets:存放图片或者其他静态资源文件
store 管理vuex状态
layouts 页面结构复用
pages 创建根路由
vue ssr 工作原理:
ssr解决seo的问题。可以使内容快速展现。‘
nuxt.js升级为