Nuxt.js是Vue进行SSR的一个优选开源项目，可免去繁琐的Webpack、nodejs后台服务配置等操作，方便的搭建一个支持SSR的VUE项目，据说尤大神曾去拜访过其作者，且多次在微博提及该项目。
Nuxt.js官方提供包括中文在内的五种语言文档，安装使用也十分亲民，提供了以下四种vue-cli初始化模板：
starter: Basic Nuxt.js project template
express: Nuxt.js + Express
koa: Nuxt.js + Koa
adonuxt: Nuxt.js + AdonisJS
喜欢自己动手灵活控制的童鞋也可以直接创建package.json，然后安装nuxt
npm i nuxt --S
最后在根目录创建pages的即可自动生成路由
由于Nuxt.js官方文档目前已经覆盖了大部分常用需求，这里不多拷贝，下面说一下使用中遇到的一些官方介绍不充分的地方。
1、代理
本地开发经常api跨域，常用node提供api代理服务来绕过该问题，Nuxt.js默认模板自然也提供了该能力，在官方找github找到modules目录，下面就有提供基于axios的代理模块配置，具体参考https://github.com/nuxt-community/modules/tree/master/modules/proxy。
目前该模块只支持默认模板，不过express、koa等将Nuxt.js以中间件形式渲染视图的情况下，我们依然可以手动注册Nuxt.js中间件或者以纯express、koa应用形式配置proxy中间件。
2、第三方库引用
官方不屏蔽你正常的import，但有提供插件模式且推荐使用插件模式，比如我想把element-ui和nuxt.js结合做后台管理系统，有些欠缺，经过第三方博客等了解尝试，得出如下配置
第一步，plugins目录下创建element-ui.js（或你自己喜欢的名字，只需后续配置时对应插件名为文件名即可），写入：
import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)
第二部，根目录找到或者创建nuxt.config.js配置文件，按照官方指引，配置plugins如下：
plugins: [{src: '~plugins/element-ui', ssr: true}]
ssr配置为true表示服务端渲染，因为Nuxt.js做到了前后端同构且首屏服务端渲染，后续客户端渲染，1.1.0之前element-ui不支持服务端渲染，需要配置ssr:false，且插件内指定只适用于客户端构建，只目前最新版已完美支持，无需关注此项
全局需要的样式也需要在nuxt.config.js配置
css: ['element-ui/lib/theme-default/index.css']
如果希望element-ui这样的第三方库打包进vendor文件，需要在build下的vendor项配置
vendor: ['element-ui']
第三部，按需加载
注释掉前面的配置，使用babel插件，在build下配置babel，安装插件babel-plugin-component
npm i babel-plugin-component -D
配置插件如下
babel: {
plugins: [['component', [
{
'libraryName': 'element-ui',
'styleLibraryName': 'theme-default'
},
'transform-async-to-generator',
'transform-runtime'
]]],
comments: false
}
使用时按照常规，我们根据需要导出个别组件并注册到Vue，然后正常使用即可。其他的如vux、mint-ui都可以如此配置使用，可以大大降低打包文件大小。
下面是我demo配置文件实例，贴出来以便参考
module.exports = {
/*
** Headers of the page
*/
head: {
title: '博客',
meta: [
{charset: 'utf-8'},
{name: 'viewport', content: 'width=device-width, initial-scale=1'},
{hid: 'description', name: 'description', content: '博客'}
],
link: [
{rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
]
},
/*
** Customize the progress-bar color
*/
loading: false,
/*
** Build configuration
*/
css: ['element-ui/lib/theme-default/index.css'],
plugins: [{src: '~plugins/element-ui', ssr: true}],
modules: [
// npm install @nuxtjs/proxy -D
['@nuxtjs/proxy']
],
proxy: {
'/api': {
pathRewrite: {'^/api': '/api'},
target: 'http://127.0.0.1:8080'
}
},
build: {
publicPath: '/resources/',
filenames: {
vendor: 'vendor.[hash].js',
app: 'static.[chunkhash].js'
},
vendor: ['element-ui'],
babel: {
plugins: [['component', [
{
'libraryName': 'element-ui',
'styleLibraryName': 'theme-default'
},
'transform-async-to-generator',
'transform-runtime'
]]],
comments: false
},
/*
** Run ESLINT on save
*/
extend (config, ctx) {
if (ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
}
