鲁达 Nuxt.js的服务器端渲染非常有利于SEO，我们也说到了服务器端渲染并不是一项新技术，但Nuxt.js可是新框架。
Nuxt.js虽然在语法上和Vue基本一致，但用法也有很多不同的地方，如果直接将Vue的方式使用到Nuxt.js上会导致无法实现服务器端渲染的情况出现。
我们简单将Nuxt.js和Vue.js做一个对比
- 打包后的输出文件
- vue: dist
- nuxt: .nuxt(有些编译器默认不显示 点文件)
- 页面渲染方式
- vue:客户端渲染，虚拟DOM ，通过ajax方式实现
- nuxt: 服务器端渲染，在服务器端完成页面组装，可实现页面静态化。
- 部属方式
- Vue:只需要部属打包后文件既dist到服务器即可，不自带服务器，需要使用Ngix或者其方式做web服务器.
- Nuxt:除node_modules，.git外需要部署几乎所有文件到服务器，自带服务端，需要pm2管理（部署时需要reload pm2），需要nginx做代理.
- 项目入口
- vue: /src ，在main.js可以做一些全局注册的初始化工作
- nuxt:没有入口文件，通过nuxt.con来进行指定配置
- 路由实现方式：
- vue:自己在router中编写路由
- nuxt:依据 pages 目录结构自动生成 vue-router 模块的路由配置。
接下来我们完成一个项目的搭建：
nuxt很贴心的为大家准备的脚手架：
npx create-nuxt-app <项目名>接下来会让你选择一系列的配置：常见的配置是 服务器端用express或者koa, 数据获取选择axios,如果选了axios，则会帮你在nuxt实例下注册 $axios ，让你可以在.vue文件中直接 this.$axios 发起请求。
nuxt提供了nuxt.con来配置我们的开发环境，并默认的配置涵盖了大部分使用情况。
我们重点聊聊nuxt.con 的配置，其他的以后详细讲解。
模式为通用模式：
mode: 'universal'head用来设置页面头部可以多放一些文案供爬虫抓取
head: { title: 'xxxx有限公司的网站', meta: [{ charset: 'utf-8' }, { name: 'keywords', content: '俺们公司是干啥的，俺们公司啥都干' }, { hid: 'description', name: 'description', content: '俺们公司是干啥的，俺们公司啥都干！修高铁，擦核电站，捞鱼雷，抓火箭' } ], link: [{ rel: 'icon', type: 'image/x-icon',//你们公司的的小icon在这里设置 href: '; }] },loading样式设置，当然也可以自定义loading，如果你需要的话：
loading: { color: '#29a31a', height:'1px', duration:2000 },css全局配置：
css: [{ src: '~assets/c;, lang: 'scss', }, { src: 'element-ui/lib/theme-chalk; } ],第三方插件配置：
plugins: [ '@/plugins/element-ui' ],相应的配置完使用的话你还需要在plugins文件夹下进行调用
第三方模块库的使用
modules: [ '@nuxtjs/axios', '@nuxtjs/proxy' ],页面切换动画
//页面切换动画 transition:{ name:'page', mode:'out-in' },需要在公用css里放置如下代码动画才能生效：
// 全局页面切换动画 .page-enter-active, .page-leave-active { transition: opacity .5s; } .page-enter, .page-leave-active { opacity: 0; }代理端口：
proxy: { '/api/': { target:'http://xxxx/api', pathRewrite: {'^/api/': ''} } },调用端口的时候就不用从http开始写起了，直接从/api写起。
按需引入element-ui:
build: { // 按需引入element-ui babel: { plugins: [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk"}, ] ] }, }下次再聊。请关心我的账号，持续技术探讨，源码暴力拆解分享。