第一个：屏幕适配问题
对应的设计稿是以 1920px 为主的
下载flexible.js
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
下载postcss-px2rem
npm install --save postcss-px2rem
配置nuxt.cofig.js
在head里加上
script: [
{ src: '/rem/flexible.js', type: 'text/javascript', charset: 'utf-8'}
],
在build里加上
postcss: [
require('postcss-px2rem')({
remUnit: 192
})
],
第二点：swiper 插件使用
如果像往常一样使用时，在组件中导入 swiper 会报 Swiper is not defined, 或者什么 window,document is not defined
nuxt.js引入vue-awesome-swiper后，控制台报错window is not defined
是因为在服务端渲染的时候，他没有 window 对象
所以当 npm 安装依赖的之后，需要自己写一个脚本，引入 nuxt.config.js
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
引入 nuxt.config.js
plugins: [
{ src: "~/plugins/swiper.js", ssr: false },
],
第三点：wow.js animate.css 踩坑
Reveal Animations When Scrolling
Animate.css | A cross-browser library of CSS animations.
【技术】nuxt中引入wow和animate.css随页面滚动出现动画_向着光芒的女孩-CSDN博客
Nuxtjs上使用wow.js+animate.css实现滚动加载动画_青颜的天空的博客-CSDN博客
最近做个官网（技术栈使用Nuxt）需要用到滑动到可视区域才触发动画效果，几乎所有的页面都要”动“起来，手写要累死的节奏，赶紧寻找工具！发现wow.js+animate.css可以满足笔者的需求。
animate.css
animate.css 是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设60多种常用的动画，且使用非常简单。
官网：daneden.github.io/animate.css…
GitHub：github.com/daneden/ani…
因为在按照wowjs的时候依赖animate.css，会自动安装，所以这里我们先不介绍安装方法。
<h1 class="animate__animated animate__bounce">Example</h1>
只需要在class里加上 animate__animated 和一个特效的名称，就可以使用它。然后它还有一堆高级用法：
-
动画延迟执行的时间：
Example
animate__delay-2s：2秒后再执行动画 animate__delay-3s：3秒后再执行动画 animate__delay-4s：4秒后再执行动画 animate__delay-5s：5秒后再执行动画 -
无限循环动画：
Exampleanimate__infinite：无限循环
WOW.js
1.说明
因为在Nuxt中代码要在客户端和服务端（Client and Server）打包两次，客户端有window和document对象，而在服务端中是没有window和document对象的，打包就会报错 ，所以 wowjs 只能在devDependencies中引入。
依赖：animate.css，它支持 animate.css 多达 60 多种的动画效果，基本能满足各种需求，不能满足的还可以自定义。
GitHub：GitHub - matthieua/WOW: Reveal CSS animation as you scroll down a page
npm install wowjs --save-dev
#or
yarn add wowjs --dev
如上所示即为安装成功，可以看到wow帮我们自动安装了animate.css，我们需要在nuxt.config.js中引入它，
export default {
...
// Global CSS: go.nuxtjs.dev/config-css
css: [..., 'animate.css/animate.css'],
...
}
接下来初始化WOW，在你需要使用特效的vue文件中引入：
<script>
if (process.browser) { // 在这里根据环境引入wow.js
var {WOW} = require('wowjs')
}
</script>
生命周期里面 根据环境实例化WOW：
mounted() {
this.$nextTick(() => {
if (process.browser) { // 在页面mounted生命周期里面 根据环境实例化WOW
new WOW({animateClass: 'animate__animated'}).init()
}
});
},
注意：new WOW().init();中的WOW要大写，否则就没效果了。因为wowjs源码中的有效变量是WOW
注意：这里为什么需要自定义 animateClass 呢?
我们看一下wow.js中默认属性配置
WOW.prototype.defaults = {
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true,
callback: null,
scrollContainer: null
};
默认 animateClass是animated，但是最新版本的animate.css中的class都是以 animate__ 开头，如
.animate__animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-duration: var(--animate-duration);
animation-duration: var(--animate-duration);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
所以我们需要把默认值 animateClass: ‘animated’ 改为 animateClass: ‘animate__animated’，这样动画才会生效。
3.使用
只需要在class里加入wow，然后再加入一个 animate.css 里面的动画，就可以实现快乐的滚动了。如：
<h3 class="pro-alias text-right wow animate__rotateInUpRight">why</h3>
当然还有其他很多配置，如：
<div class="wow animate__bounce " data-wow-delay="1.5s" data-wow-iteration="1"></div>
- data-wow-duration：更改动画持续时间
- data-wow-delay：动画开始前的延迟
- data-wow-offset：开始动画的距离（与浏览器底部相关）
- data-wow-iteration：动画的次数重复（无限次：infinite）
4.使用自定义动画
<p class="si-desc wow customSlideUpIn" v-for="(item, index) in (selectDetail.description)" :key="index">item</p>
