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

1. 首先我们需要在plugins文件夹中添加插件文件，element-ui.js

2. 在nuxt.config.js中配置plugins字段

3. 由于elementUI是第三方库，我们需要把它打包到库文件里面以获得更好的缓存效果。在nuxt.config.js中配置element-ui即可。

4. 同时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入口，只能在配置里面运用，总之是不大推荐生产的。