Nuxt 简介
通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。
最近应为公司的业务需对SEO很高，从而选择了NUxt，其中也遇到很多的坑，最后索性记录下关键点，以备后面查看。在网上也找了很多的资料。也有选择用 vue-server-renderer来做服务的渲染。
const vue = require('vue');
const server = require('express')();
server.get('/', (req,res) => {
const vm = new Vue({template:` this is server renderer `}).$mount('#app');
const renderer = require('vue-server-renderer').createRenderer();
renderer.renderToString(vm).then((doc) => {
res.send(doc)
}).catch(err){
throw new Error(err)
};
});
server.listen(3000, () => {console.log('localhost:3000')})
安装
yarn create nuxt-app
选择服务器端框架 --> 选择 UI 框架 --> 选择测试框架 --> 选择Nuxt 模式 (Universal[服务端渲染] or SPA) -->
目录结构
| 名称 | 描述 |
|---|---|
| assets | 资源目录 |
| components | Vue.js 组件 |
| layouts | 组织应用的布局组件 |
| middleware | 目录用于存放应用的中间件 |
| pages | 页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置 |
| plugins | 实例化之前需要运行的 Javascript 插件 |
| static | 静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下 |
| store | 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置 |
| nuxt.config.js | 文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。若无额外配置，该文件不能被重命名下图Nuxt官网阐述了 Nuxt.js 应用一个完整的服务器请求到渲染（或用户通过 |
1、nuxtServerInit 服务器初始化 ↓
2、middleware 中间件运行（nuxt.config.js / layout / pages&children）↓
3、validate() 校验参数(pages&children) ↓
4、asyncData() & fetch() 异步数据处理(pages&children) ↓
5、render 开始客户点渲染 ↓
6、Vue 生命周期 beforeCreated && created ↓
配置
| 名称 | 描述 | 默认值 | 自定义 |
|---|---|---|---|
| build | 允许你在自动生成的 vendor.bundle.js 文件中添加一些模块，以减少应用 bundle 的体积。如果你的应用依赖第三方模块，这个配置项是十分实用的 | 默认 | 自定义 |
| css | 定义应用的全局（所有页面均需引用的）样式文件、模块或第三方库 | 默认Css | 自定义Css |
| dev | 用于配置 Nuxt.js 应用是开发还是生产模式 | 默认Dev | 自定义Dev |
| env | 用于定义应用客户端和服务端的环境变量 | 默认Env | 自定义Env |
| generate | 定义每个动态路由的参数 | 默认Generate | 自定义Generate |
| head | 配置应用默认的 meta 标签 | 默认Head | 自定义Head |
| loading | 个性化定制 Nuxt.js 使用的加载组件 | 默认Loading | 自定义Loading |
| modules | 允许您将 Nuxt 模块添加到项目中 | 默认Modules | 自定义Modules |
| modulesDir | 允许您定义Nuxt.js应用程序的node_modules文件夹 | 默认ModulesDir | 自定义ModulesDir |
| plugins | 需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件 | 自定义Plugins | 自定义Plugins |
| rootDir | 该配置项用于配置 Nuxt.js 应用的根目录 | 默认RootDir | 自定义RootDir |
| router | 该配置项可用于覆盖 Nuxt.js 默认的 vue-router 配置 | 默认Router | 自定义Router |
| server | 此选项允许您配置 Nuxt.js 应用程序的服务器实例变量 | 默认Server | 自定义Server |
| srcDir | 该配置项用于配置应用的源码目录路径 | 默认SrcDir | 自定义SrcDir |
| dir | 此选项允许您配置 Nuxt.js 应用程序的自定义目录 | 默认Dir | 自定义Dir |
| transition | 该配置项用于个性化配置应用过渡效果属性的默认值 | 默认Transition | 自定义Transition |
路由
标签路由 < NuxtLink >
About Page
标签链接的激活样式 nuxt-link-active和nuxt-link-exact-active
页面跳转的 参数的接受
Path: {{ $route.slug }}
嵌套页面
I am the parent view