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:`<div> this is server renderer </div>`}).$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 <project>

选择服务器端框架 --> 选择 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 ></NuxtLink >

<NuxtLink to="/about">About Page</NuxtLink>

标签链接的激活样式 nuxt-link-active和nuxt-link-exact-active

页面跳转的 参数的接受

<NuxtLink :to="{ name: 'mountains-slug', params: { slug: mountain.slug } }"></NuxtLink>

<p>Path: {{ $route.slug }}</p>

嵌套页面 <NuxtChild /> 再父页面和子页面都可以看到的。

<div>
    <h1>I am the parent view</h1>
    <nav>
      <ul>
        <li>
          <NuxtLink to="/parent/child">Child</NuxtLink>
        </li>
        <li>
          <NuxtLink to="/parent/child2">Child 2</NuxtLink>
        </li>
      </ul>
    </nav>
    <NuxtChild  />
</div>