现在正在做一个产品的官网项目，之前用jQuery写过一个，但是是现学现卖的，写的很糟糕，而且，也很难维护。于是，上线之后，又用Vue重写了一个。因为考虑到产品的SEO需要，而Vue又是做SPA单页面应用的，所以就结合使用了Nuxtjs这个服务端渲染框架。
下面就带着大家来入门一下，需要有一定的Vue和Nodejs基础。
在使用前，先介绍一下，什么是nuxtjs？我的理解是，它是一个以vuejs为基础的应用框架，在内部配置了vuejs服务端渲染的各种配置。
Nuxtjs集成了vue及其他一些组件/框架和工具，如vuex、vue-router、vue-meta，并且使用webpack、vue-loader、babel-loader来处理代码的自动化构建工作，如打包、热加载、压缩等。
至于它的特性，实在记不住那么多，我从官网直接拉下来给大家看一下：
基于 Vue.js/自动代码分层/服务端渲染/强大的路由功能，支持异步数据/静态文件服务/ES6/ES7 语法支持/打包和压缩 JS 和 CSS/HTML头部标签管理/本地开发支持热加载/集成ESLint/支持各种样式预处理器：/SASS、LESS、 Stylus等等
下面，介绍一下如何使用。
第一：安装
Node版本需要在7.0以上。
使用vue-cli来安装（确保你已经安装了vue-cli）：vue init nuxt-community/starter-template
第二：项目目录结构介绍
项目初始化后的目录结构大概是这样，一一介绍一下：
.nuxt：应该就是nuxt的代码了
assets：用来存放未编译的静态资源如图片，sass文件等。需要webpack编译
components：存放vuejs组件
layout：布局组件
pages：页面文件，生成对应的视图及路由，nuxtjs会读取下边所有的文件，并自动生成路由所需要的配置。
plugins：插件目录
static：静态文件，webpack不会编译这里面的文件
store：nuxtjs继承了vuex，在这里使用vuex
nuxt.config.js：nuxtjs配置文件
package.json：项目依赖包及运行脚本命令
第三：配置
nuxtjs运行在nuxt.config.js中自定义配置来覆盖它原来的配置。我这里就举几个例子。
build：当使用第三方模块的时候，build让你能够自定义webpack的配置。该配置对象里边有很多项配置，例如loader可以自定义webpack加载器，plugins配置webpack插件。
css：配置全局的css文件，这样在每个文件中都会引入。当然，也可以在modules中，通过其他loader来处理css文件。注意modules中的模块是按顺序执行的。
第四：路由
nuxtjs集成了强大的路由功能，我们甚至不需要自己配置vue-router的任何参数，nuxtjs会自动生成路由配置，具体的例子可以看一下官网的介绍，简单易懂。
基础路由：只需要按照你想要的一级路径，二级路径，把组件放进对应的文件夹里面即可。
动态路由：
嵌套路由：
在页面之间跳转链接的时候，nuxtjs提供了
nuxtjs提供了页面跳转的全局过渡效果，在assests目录中定义main.css文件并添加一些样式：
.page-enter-active, .page-leave-active {
transition: opacity .5s;
}
.page-enter, .page-leave-active {
opacity: 0;
}
然后在nuxt.config.js中配置css属性： css: 'assest/main.css' 。
也提供了局部的过渡效果，再main.css中再添加同样的样式（page改为test）,然后将页面组件中的transition属性transition: 'test' 。