现在正在做一个产品的官网项目，之前用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 <project-name>，安装完后，cd进入项目，别忘了npm install。

第二：项目目录结构介绍

项目初始化后的目录结构大概是这样，一一介绍一下：

.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提供了<nuxt-link>标签来进行跳转。

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' 。