nuxt踩过的坑
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还支持区分只在浏览器中运行和只在服务端运行的插件。
- 只在浏览器运行：配置nuxt.config.js中plugins字段，将引入的插件属性设置为ssr： false
- 只在服务端运行：直接在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入口，只能在配置里面运用，总之是不大推荐生产的。
