为什么要用Nuxt.js
公司现有的项目只有落地页是通过前端本身server读取pug文件进行服务端渲染的，当然是为了首屏加载速度以及SEO。Nuxt.js 是一个基于Vue.js的通用应用框架，预设了利用Vue.js开发服务端渲染的应用所需要的各种配置，只需要安装官方文档的要求进行开发，就可以很好的解决SSR的问题。我们以一个简单的博客为例，来实践一下Nuxt.js。
项目介绍
当前基于Nuxt.js的简化版博客，包括注册、登录、文章列表页面、文章详情页、以及用户列表页等几个页面，用户信息使用了Vux进行存储，异步数据使用了asyncData进行获取，配合了nuxtServerInit、cookie来处理刷新页面后Vux数据丢失的问题，同时使用了error模板页面处理常规错误，使用了中间件进行了简单的权限校验。该项目不足点，统一封装了axios的方法，但是没有考虑到服务端请求接口，token的处理。
目录结构
assets: 资源文件。用于组织未编译的静态资源如 LESS、SASS或 JavaScript。
components: 组件。
layouts: page: 模板页面，默认为 default.vue可以在这个目录下创建全局页面的统一布局，或是错误处理页面页，需要提供一个nuxt 标签，类似于router-view
middleware: 中间件，放置自定义的中间件，会在加载组件之前调用。可以在页面中调用： middleware: '中间件名称'。
pages: 页面，index.vue 为根页面，Nuxt.js 框架读取该目录下所有的 .vue文件并自动生成对应的路由配置，如需要动态参数id，则可以添加_id的文件，必须是下划线加参数名。
plugin: 插件，用于组织那些需要在 根Vue.js应用实例化之前需要运行的 Javascript 插件。
static: 静态文件，静态文件目录 static用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。
store: 用于组织vuex状态管理。具体使用请移步至 官网。
nuxt.config.js: nuxt.config.js文件用于组织Nuxt.js 应用的个性化配置，配置head，loading，css，plugins等。
Nuxt.js生命周期
1. incoming Request 浏览器发出的请求）
2. nuxtServerInit 服务端接受请求后，要检查当前有没有 nuxtServerInit配置项，如果有就执行这个函数
3. store action 用来操作vuex
4. middleware 可以做jWT等一些操作。
5. validate() 检验参数，参数检验失败，可以在layout里的error里面进行捕捉。
6. asyncData()& fetch() asyncData用来渲染组件,fetch用来渲染vuex
7. Render
Nuxt扩展以后的生命周期和方法以下：
beforeCreate: ƒ beforeCreate() components: {NuxtLoading: {…}} computed: {isOffline: ƒ} context: {isStatic: false, isDev: true, isHMR: true, app: {…}, payload: undefined, …} created: ƒ created() data: ƒ data() head: {title: "nuxt-meituan-ssr", meta: Array(3), link: Array(1), style: Array(0), script: Array(0)} methods: {refreshOnlineStatus: ƒ, refresh: ƒ, errorChanged: ƒ, setLayout: ƒ, loadLayout: ƒ} mounted: ƒ mounted() nuxt: {…} render: ƒ render(h, props) router: VueRouter {app: Vue, apps: Array(1), options: {…}, beforeHooks: Array(2), resolveHooks: Array(0), …} watch: {nuxt.err: "errorChanged"}
注意：
Vue.js生命周期的钩子只有beforeCreate和created会在服务端和客户端渲染。
以上生命周期里都获取不到window对象。
asyncData和fetch我们可以拿到数据，不要尝试挂载数据到data上，此时获取不到this对象。
开发总结
如何修改默认启动端口？
可以在package.json下面修改配置，如下。
"config":{ "nuxt":{ "host":"127.0.0.1", "port":"3304" } }
如何添加全局的样式？
可以在assets里添加全局Css文件，如在assets下的Css文件夹目录下添加了一个index.css文件，然后在nuxt-config.js里配置该css文件路径即可。 css:['~assers/css/index.css']
通过别名访问图片在template里是正确的，为何在Css设置背景图却报错？
在css配置的是，需要将'~/'后面的'https://www.jb51.net/'去除掉。
<img src="https://www.jb51.net/~/static/logo.jpg"/> backround-image:url('~static/logo.jpg');
如何添加路由动画？
同样，我们在Css文件里添加一些动画代码，一般样式会在其后面添加-active和-leave-active，其实和Vue动画形式一致。其中以page开头的动画，默认会作用于全部页面，如果想给特定的页面加动画，可以在对应的页面script里引用，如 transitions: 'bounce'即可。