本文目录一览：
- 1、NUXT项目打包优化策略
- 2、nuxt-generate 静态站
- 3、Vue-awesome-swiper使用教程
- 4、Vue SSR 项目 Nuxt.js 框架之《如何引入第三方UI框架element-ui》
- 5、nuxt.js 简述
NUXT项目打包优化策略
用nuxt开发完项目之后，开开心心打包扔上服务器准备收工，却没多久，测试童鞋遗憾的告诉我，压测50并发未通过。what？好吧。咱们再接下来老老实实的研究怎么压缩打包优化性能。
性能优化，无外乎那几个方案：文件压缩，文件缓存，CDN，DNS 预解析。。。
这里我们首先看一下不加任何优化的项目，打包后的分布：
这里能看到element-ui占了绝大部分的打包空间，是因为全局引入了element-ui，所以即使我们只使用了一部分的elemnt组件，但仍然把整个element给打包进来了。
所以这里有一个可以优化的点： 只引入element使用的组件，这样在打包的时候只需要打包使用的组件，体积就会减小很多 。
我们再来看看这么处理之后，我们打包出来的效果：
可以看出，我们减少了将近 400kb 的体积，效果十分显著。
好了，我又自信满满的把包丢到服务器上，准备金盆洗手。?
然鹅没过多久，运维童鞋发过来一张图把我打回原点。
我看了一下vendor.app.js，足有501kb，难怪会阻塞?♀️好吧，这里应该使用上文件压缩这杆大枪了。
nuxt本身就是基于webpack的，正好安装compression-webpack-plugin来对文件进行压缩。
首先安装npm install compression-webpack-plugin
然后在nuxt.config.js中：
const CompressionPlugin = require('compression-webpack-plugin');
module.exports={
build: {
plugins: [
new CompressionPlugin({
test: /\.js$|\.html$|\.css/, // 匹配文件名
threshold: 10240, // 对超过10kb的数据进行压缩
deleteOriginalAssets: false // 是否删除原文件
})
],
}
}
这样打包出来的大小虽然没变，但是点击.nuxt-dist-client中你会发现
观察发现gz打包后，较原来的文件减少了3/4的体积。有了这些gz后缀的文件，再配合nginx打开gzip服务。我想这回应该可以冲过50并发了吧，说不定200并发都没问题???
好了，我这回真的自信满满的把包丢到服务器上，通知测试童鞋再次压测，果不其然，测试童鞋过了一会回复：50并发跑5次无异常。??我大气说，上100！我翘着得意的二郎腿，等着好消息再次到来。过了一会，果不其然！测试童鞋告诉我，100并发阻塞。原因同上，出在了vendor.app.js上?
这里我说一下vendor.app.js打包之后的体积是144kb。然鹅在高并发下，表现还是不理想，于是乎我只能上网去到处搜索解决方案，毕竟po主的webpack知识也就那么一勺水的深度?♀️?♀️
这里还真让我找到了一个台湾的网站，可见参考链接第三条。
splitChunks: 设定 Chunks 的最大和最小 size。
在nuxt.config.js中加入：
module.exports={
build: {
optimization: {
splitChunks: {
minSize: 10000,
maxSize: 250000
}
},
}
}
打包，观察打包结果：
可以看到虽然包体积虽然没变，但是像vendor.app.js这种单个体积大的被拆分成n个体积小的文件了。
这回终于是可以突破100并发5次无异常，达成并发要求了????
总结一下，其实po主也不是什么webpack大神，也是摸爬滚打整出来的，大家如果能有什么更好的优化建议或者指教，请多多交流，不对之处我会改正！
参考：
Nuxt 项目性能优化调研
NUXT项目的性能优化
SplitChunks Lodash Vuetify tree shaking
nuxt-generate 静态站
nuxt generate部署静态站
在nuxt.config.js配置页面路径
默认情况下，运行nuxt generate将为每个路由创建一个目录并生成index.html文件。
在nuxt.config.js里generate选项里配置
subFolders： flase
设置为false时，将根据路由路径生成HTML文件
部署后项目会生成dist目录，直接打开对应的html文件 ，可能会出现图片不显示，不用管 部署到服务器后就不会有这个问题。
Vue-awesome-swiper使用教程
github地址：
Ⅰ. 什么是Nuxt.js:
Nuxt.js 是一个基于 Vue.js 的通用应用框架，通过对客户端/服务端基础架构的抽象组织，预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。（开箱即用）
官方地址：
Ⅱ. Nuxt安装使用
Ⅲ. Nuxt模板目录结构分析
重点关注 ：components、layouts、pages、plugins、nust.config.js目录及文件
Ⅳ.Nuxt路由
➀.pages目录结构自动生成对应的路由配置
➁路由跳转
注意 ：不能用a标签代替nuxt-link组件，虽然最终的显示效果一样，但是a标签会刷新页面
③动态路由
④路由参数校验
Nuxt.js 可以让你在动态路由对应的页面组件中配置一个 validate 方法用于校验动态路由参数的有效性。该函数有一个布尔类型的返回值，如果返回true则表示校验通过，如果返回false则表示校验未通过。
⑤嵌套路由
Ⅴ.布局组件
特殊的布局组件 ：error布局组件（error是关键字，只能取这个名字）
Ⅵ.设置全局样式
Ⅶ.ElementUI使用
测试的时候不要范如下错误 ：
Ⅷ.发送请求
➀.生命周期函数：
在nuxt中，只有created以及beforeCreate两个能够在服务端正常使用
但是发异步请求不能在created生命周期函数中去发送，因为它会在前端执行（打印一下，发送前端和服务器端都会有打印信息）
那么如何发送异步请求呢？
➁.asyncData的方法:可以在服务端或路由更新之前被调用, 需要注意这个函数中 不能 使用 this
③. axios的使用
Ⅸ.SEO优化
➀.全局优化:在nuxt.config.js配置文件中修改
➁.局部优化:去每个页面直接加入head() 方法
Ⅹ.实战项目：豆瓣电影小案例
➀.案例源码：
复制这段内容后打开百度网盘手机App，操作更方便哦
链接：
提取码：iqjb
➁.获取源码后项目跑动
后记： 解决SEO问题不一定非得用服务端渲染来处理，特别是项目已经开发完毕，突然告诉你添加个SEO优化，这时候可以考虑vue-meta-info ，官方地址：
Vue SSR 项目 Nuxt.js 框架之《如何引入第三方UI框架element-ui》
在项目开发中引入第三方 UI框架 再平常不过，那 nuxt 该如何引入呢？我们以 Elemeng-ui 为例，具体看下在 nuxt 中配置与使用的步骤是怎样的。
需在 plugins 文件夹里创建一个 element-ui.js 文件，内容如下：
在 nuxt 项目中如何使用 scss ？与 Vue 中使用的有和不同？也简单，只是配置上略有不同，使用上没有不同。先安装 node-sass sass-loader ，如下：
安装成功后，就可以在页面里使用 scss 了，无需任何配置，如下：
第一步：安装 @nuxtjs/style-resources
第二步：配置 nuxt.config.js
项目重启后就可以了，欢迎留言 评论
nuxt.js 简述
vue单页面应用渲染是从服务器获取所需js，在客户端将其解析生成html挂载于
id为app的DOM元素上，这样会存在两大问题。
除此之外，nuxt与vue还有一些其他方面的区别。
下图为关于nuxt的简单概述
vue文件中可直接使用
sass文件如需解析，nuxt.config.js中配置css属性
封装axios，解决每个请求前加baseURL
plugins/axios.js
index.vue
为避免每个页面都引入moment，执行 moment.locale('zh-cn') ，可将其定义为全局方法
icon.png文件存放在static文件夹下，nuxt.config.js中配置head属性
中间件存放于middleware文件夹下，按使用场景可分为全局中间件和单页面中间件
中间件执行流程顺序：
nuxt.config.js - 匹配布局 - 匹配页面
按照index.vue通过 require('mini-toastr') 引入miniToastr，运行程序报错如下
打印miniToastr发现为一Module对象，init挂载在其default属性上
所以修改引入方法为
为什么需要require().default
关于如上介绍，测试关于两种模块的导出方法
方式一：export default
新建test.js文件
vue页面导入
此时 require('~/plugins/con.js') 打印为
方式二：module.exports
此时 require('~/plugins/con.js') 打印为
