详解详解Vue基于基于 Nuxt.js 实现服务端渲染（实现服务端渲染（SSR））
直接使用 Vue 构建前端单页面应用，页面源码时只有简单的几行 html，这并不利于网站的 SEO，这时候就需要
服务端渲染，本篇文章主要介绍了详解Vue基于 Nuxt.js 实现服务端渲染（SSR），具有一定的参考价值，感兴
趣的小伙伴们可以参考一下
直接使用 Vue 构建前端单页面应用，页面源码时只有简单的几行 html，这并不利于网站的 SEO，这时候就需要服务端渲染
2016 年 10 月 25 日，zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js
几小时后，一个基于 Vue.js 的服务端渲染应用框架应运而生，与 Next.js 异曲同工，这就是Nuxt.js
一、快速模板一、快速模板
在已经安装了 vue-cli 的前提下，可以快速创建一个 nuxt 的项目模板
vue init nuxt-community/starter-template MyProject
其中 MyProject 是项目文件夹名称，可自定义
通过 npm install （似乎用 yarn install 更顺利） 安装依赖之后，可以直接 npm run dev 在 开发环境开发环境 启动项目
默认启动的地址为 http://localhost:3000/，可以在 package.json 中添加以下配置来修改主机端口号
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "7788"
}
},
开发完成后执行 npm run build 打包代码，最后 npm start 启动服务
二、重要目录二、重要目录
生成的 项目目录 如下
大部分文件夹名称 都是都是 nuxt 默认保留的，不可修改默认保留的，不可修改
其中比价比较关键的目录有三个：
1. components 组件目录组件目录
一般用来存放 非页面级别非页面级别 的组件，如 header、footer 等公共组件
该目录下的组件具有常规 vue 组件的方法和特性，不会被 nuxt.js 扩展特性
2. layouts 布局目录布局目录
可以修改该目录下的 default.vue 来修改默认布局
<template>
<div>
<my-header></my-header>
<nuxt/>
<my-footer></my-footer>
</div>
</template>
其中 <nuxt/> 是必需的，页面的主体内容会显示在这里 （类似于根节点的 <router-view/>）
此外还可以在目录下新增 error.vue 作为错误页面，具体的写法可以参考官方文档
3. pages 页面目录页面目录
用于存放页面级别的组件，nuxt 会根据该目录下的页面结构生成路由
比如上图中的页面结构，会生成这样的路由配置：
资源评论
