（本篇文章将讲解，如何使用Nuxt.js。下一篇文章将讲解，如何使用Next.js。）
Nuxt.js是法国的两位兄弟基于Vue2.0开发的，解决Vue 搜索引擎爬虫抓不到这个问题，而且可以提高首屏加载的速度。zeit.co背后的团队发布的Next.js，基于React的服务端渲染应用框架。二者是异曲同工的。
Nuxt.js
Nuxt.js其实原理很容易理解，从服务器请求数据，然后渲染界面，就是这么一个简单的过程。服务端渲染对SEO友好，在经过网络传输的时候，爬虫客户端爬到我们的页面后会分析我们的页面，然后我们的页面关键数据就会被爬虫收录了。客户端渲染很明显是对SEO不友好的。有一点个人觉得应该说一下的，使用服务端渲染，对服务器压力是存在的，至于多大，项目不同，压力也不一样。
因此在选择是否需要使用服务端渲染，可以根据业务需求来确定。
正文
明白了Nuxt.js是用来解决什么问题，有哪些特点后，我们开始讲如何使用。
Nuxt.js可以引入到现有的项目，也可以从头开始新建项目。我们先讲解如何从头开始新建项目：
官方提供了两种方式给我们来建立Nuxt.js应用项目，一种是使用starter模板，一种是从0开始搭建(文章内容有限，只讲精华，这里不讲，可以看官方文档)。
一、Starter模板使用步骤：
1、建议使用vue-cli安装使用：
$ vue init nuxt-community/starter-template <project-name>
（注意：如果没有安装Vue-cli，需要先通过
npm install -g @vue/cli @vue/cli-init 来安装）
2、 安装依赖包:
$ cd <project-name> $ npm instal
接着启动项目：
$ npm run dev
应用现在运行在 http://localhost:3000 可以运行看看效果。
运行成功成功后，按照规范来开发就可以了（规范自行看文档）。
下面这个流程图，可以看到Nuxt.js从服务器请求到渲染的这个过程(具体的原理官方文档有详细介绍)：
二、现有项目引入Nuxt.js
项目是基于Vue2.0的才可以使用Nuxt.js（Nuxt.js已经出了2.0了）
这是使用了vue-cli搭建的项目。下面讲如何在已有的项目引入Nuxt.js
步骤：
1、在根目录新建nuxt.config.js（用来设置我们个性化的配置）
nuxt.config.js的代码就不贴出来了（很多开元的项目的demo代码，自行参考）
2、在根目录新建nuxt文件夹
（文件夹里面需要新建5个文件夹（assets、component、layouts、pages、static）、一张图片）
3、为了让命令更加快捷易懂，我们可以在package.json对script进行一下操作：
置
"scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate", "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", "precommit": "npm run lint" }
更多的命令操作可以移步到官方文档。
4、完成了上面这三步之后，剩下的工作只需要把原先有的项目移入到nuxt文件夹对应的文件里面就可以了。
Tip:
1、layouts这个文件夹是我们应用使用的布局，如果布局你需要自定义可以在layouts下新建一个default.vue来自定义布局。注意：<nuxt />是用来显示页面的主体内容（布局怎么操作移步到官方文档就可以了）。
2、vue-router这块我们不需要关心的，nuxt会根据pages目录结构自动生成路由的。pages文件夹放文件夹（一个文件夹代表一个模块）
目录结构：
-pages -login -index.vue -friend -index.vue
（nuxt会自动生成路由）
页面之间的跳转使用下面这个语句就可以了：
this.$router.push('/goods')
3、assets目录是用来放我们的静态资源的，我们调用assets里面的资源的时候最好使用相对路径。
结语:
如果需要使用到express作为server端的话，说明对Nuxt.js理解有一定的深度了。这里只是引导使用Nuxt.js，因此就不做深入讲解了。
（如果有哪里写错的，欢迎在后台提出，第一时间改正。）
