nuxt.js 简单介绍
nuxt 官网：https://zh.nuxtjs.org/
1、nuxt.js 的原理图：
具体的原理介绍官网有详细的解释，欢迎移步官网，这里不再复述。
2、nuxt.js 的优势
1）就是我们无需为了路由划分而烦恼，你只需要按照对应的文件夹层级创建 .vue 文件就行
2）无需考虑数据传输问题，nuxt 会在模板输出之前异步请求数据（需要引入 axios 库），而且对 vuex 有进一步的封装
3）内置了 webpack，省去了配置 webpack 的步骤，nuxt 会根据配置打包对应的文件
技术栈选型
“axios”: “^0.17.1”,
“css-loader”: “^0.28.7”,
“element-ui”: “^2.0.7”,
“moment”: “^2.20.0”,
“nuxt”: “^1.0.0-rc11”,
“postcss-loader”: “^2.0.9”,
“sass-resources-loader”: “^1.3.1”,
“scss”: “^0.2.4”,
“style-loader”: “^0.19.0”,
“vue”: “2.5.9”,
“vue-server-renderer”: “2.5.9”,
“vue-template-compiler”: “2.5.9”
实施方案
使用 vue 插件 - elementUI
首先我们需要在 plugins 文件夹中添加插件文件，element-ui.js
在 nuxt.config.js 中配置 plugins 字段
由于 elementUI 是第三方库，我们需要把它打包到库文件里面以获得更好的缓存效果。在 nuxt.config.js 中配置 element-ui 即可。
同时 nuxt 还支持区分只在浏览器中运行和只在服务端运行的插件。
1) 只在浏览器运行：配置 nuxt.config.js 中 plugins 字段，将引入的插件属性设置为 ssr： false
2) 只在服务端运行：直接在 webpack 打包 server.bundle.js 文件中，将 process.SERVER_BUILD 设置为 true 即可 layout 布局
layout 布局
nuxt.js 实现了一个新的概念，layout 布局，我们可以通过 layout 布局方便的实现页面的多个布局之间方便的切换。本项目中实现了三种常用的布局，即：1）两栏布局，左栏固定，右栏动态宽度；2、错误页提示，页面中间一个提示框的布局方案；3、纯白页面布局。
结合 elementUI 可以进行快速布局
页面路由
nuxt 框架的页面路由使用了 vue-router，但是我们不需要对页面的路由进行过多的操心，因为我们只要按照 nuxt 规范的页面文件目录结构进行设计，就可以自动生成 vue-router 文件。或者说我们存放页面的目录结构会直接影响最终生成的路由配置。
总结
也是正因为这点导致小白上手快，开发难度降低了一个等级，而这对需求大的功能构成 l 挑战，因为此框架面世比较早，早期从而导致奇妙的错误，官方文档已经警告过你了，线下试试还可以，如果运用生产环境就惨很多。要填各种坑。路由跳转问题，路由传参，
滚动条问题，vue-router 存在各种问题而且没有一个统一的 main 入口，只能在配置里面运用，总之是不大推荐生产的。
