快速上手撸Nuxt

最近几天在撸Vue的SSR框架Nuxt.js，先来说说为啥会出现这玩意。目前火热的SPA单页应用虽然很多优点，但是美中不足的是首屏渲染可能比较慢，而且对SEO不是很友好，页面加载出来就是一个空的div，啥内容都抓不到。说到SEO，我想到我老哥公司项目官网就有专门的SEO专员做推广，实际上原理就是基于meta标签的字段。我想说的是然并卵，在这个物欲横流社会靠的是啥，钱，没有什么是钱解决不了的事情，如果有，那就是更多的钱，百度，你懂的，你要是土豪砸个百来万，分分钟让你上榜首！不吹不黑！好了，扯远了，偏题了，哈哈。

好了，言归正传。说说Nuxt,这玩意就是解决我上面说的两个问题，就是把页面在服务端提前渲染好了直接返给客户端，这样客户端就不用再耗时请求数据了。首屏加载体验更快，当然SPA可以用路由懒加载实现优化。接下来就简单介绍一下吧，Nuxt的官网，https://nuxtjs.org/,文档很亲切，中文翻译的好。

我们知道如果不借助Nuxt也可以实现服务端渲染，但是要经过一个很繁琐复杂的webpack配置，于是Vue社区的大佬们就整出了个Nuxt，在此我想说的就是其实Vue的周边生态近年来也是在蓬勃发展虽然和React还是有一定的差距，相信Vue会越来越好。当然以后我有时间也会去研究研究如何不用Nuxt纯手撸SSR，了解下服务端渲染的原理和流程。

上手开撸吧！

首先new一个文件夹取名随意，Mac的话撸Linux命令，逼格高，cd到你喜欢的路径，mkdir [name],我取的是Nuxt，顾名思义嘛，然后就是安装，这里你嫌麻烦的话直接去官网下zip包吧，或者用vue-cli装，vue-cli怎么装也说下吧，npm i vue-cli -g记得加-g全局安装，install可以简写成i,没办法，就是懒。<project-name>可以不写，默认就是当前文件夹下。

安装

Y+Enter

然后就可以一顿骚操作了。我一路按Y，装了有你的Nuxt，你说你好累，已无法再写代码~哈哈。npm会自动帮你拉Nuxt模板，然后装完了。

跑起项目

按提示，npm i装下依赖，看见没，简写就是爽，还可以提升逼格。少了n,s,t,a,l,l足足六个字母啊，省事又省力，或者你觉得逼格不够可以上yarn，这个逼我没装过留给大家了。接着npm run dev

安装完成

访问http://localhost:3000,当然这些主机和端口都可以在package.json里配置，下回详细说。

画面太美

画面太美，亮瞎我的眼，好了，一个nuxt应用就起来了。接下来我们右键查看源码。

nuxt源码

画面更美了，看见没，一个完整的html页面来对比下SPA,没有对比没有伤害...

spa源码

oh,holy shit ! 184 : 16, 好了由此可以推测，今年欧冠利物浦是冠军，nba总决赛是火箭VS绿军，好了，奶够了。

下面看下项目目录结构

目录结构

和SPA挺像，最关键的就是.nuxt的目录，实现ssr的根本，里面代码我也看不是很懂，先学会用呗，比如后面我们请求数据会用到的Nuxt帮我们封装好的AsyncData方法，Nuxt已经帮开发者自动集成了路由，非常方便，基于vue-router,在.nuxt目录下的router.js可以看到，也集成热加载,真的是很好用，你只需按照开发SPA的方式去写就好了，其他的无需关心，Nuxt都帮你做好了。人间大爱啊，今天就先到这吧，下回继续介绍~