携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情
一、nuxt开发图片压缩优化
1、运行命令npm install --save-dev @aceforth/nuxt-optimized-images：安装开发时压缩图片到依赖。
2、在nuxt中写入如下代码：
buildModules: [
'@aceforth/nuxt-optimized-images',
],
optimizedImages: {
optimizeImages: true
}
3、接着安装你需要压缩到图片格式
| Optimization Package | Description | Project Link |
|---|---|---|
| imagemin-mozjpeg | OptimizesJPEG images | Link |
| imagemin-pngquant | Optimizes PNG images | Link |
| imagemin-optipng | Alternative for optimizing PNG images | Link |
| imagemin-gifsicle | Optimizes GIF images | Link |
| imagemin-svgo | Optimizes SVG images and icons | Link |
| webp-loader | Optimizes WebP images and can convert JPEG/PNG images to WebP on the fly (WebP resource query) | Link |
| lqip-loader | Generates low quality image placeholders and can extract the dominant colors of an image (lqip resource query) | Link |
| responsive-loader | Can resize images on the fly and create multiple versions of it for a srcSet. Important: You need to additionally install either jimp (node implementation, slower) or sharp (binary, faster) | Link |
| sqip-loader | Loads images and exports tiny SQIP previews as image/svg+xml URL-encoded data | Link |
我这里图片都是png格式的所以我安装png的：
npm install --save-dev imagemin-pngquant
4、打包，我这里nuxt直接是生成静态文件的，所以输入命令：npm run generate
5、效果，这张图是没压缩前的图片大小：
可以看到快49M了。
下面这张图就是压缩过后的了：
可以看到比原来小了接近一半。
二、nuxt按需引入element-ui
1、安装按需引入的插件：
命令：npm i babel-plugin-component -D
2、在nuxt.config.js中写入配置：
babel: {
plugins: [
['component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
}
3、在plugins/element-ui.js中写入你用到的组件：
import Vue from 'vue';
import { Drawer, Form, FormItem, Input, Row, Col } from 'element-ui';
Vue.use(Drawer).use(Form).use(FormItem).use(Input).use(Row).use(Col);
三、nuxt中使用aos动画库
1、运行命令安装npm i aos
2、在plugins文件夹下创建aos.js文件，写入代码：
import AOS from 'aos';
import "aos/dist/aos.css";
export default ({app}) => {
app.AOS = new AOS.init();
}
3、接着在nuxt.config.js中进行配置：
{ src: '@/plugins/aos.js', ssr: false },
在你需要用到的dom中去使用：
<div data-aos="zoom-out" data-aos-offset="100" data-aos-easing="ease-in-sine" data-aos-duration="750"></div>
| 属性 | 属性 | 属性 | 默认值 |
|---|---|---|---|
| aos-offset | 是立刻触发动画还是在指定时间之后触发动画 | 200 | 120 |
| aos-duration | 动画持续时间 | 600 | 400 |
| aos-easing | 动画的easing动画效果 | ease-in-sine | ease |
| aos-delay | 动画的延迟时间 | 300 | 0 |
| aos-anchor | 锚元素。使用它的偏移来取代实际元素的偏移来触发动画 | #selector | null |
| aos-anchor-placement | 锚位置，触发动画时元素位于屏幕的位置 | top-center | top-bottom |
| aos-once | 动画是否只会触发一次，或者每次上下滚动都会触发 | true | false |
四、scss配置文件（变量、样式）
在assets文件夹下新建scss文件夹，新建_variables.scss写入：
$flex-jc: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly
);
$flex-ai: (
start: flex-start,
end: flex-end,
center: center,
stretch: stretch,
);
$ps: (
ab: absolute,
re: relative,
sticky: sticky
);
$colors: (
"primary": #338AFF,
"white": #ffffff,
"black-1": #333333,
"black-2": #2A2A2C,
"black-3": #4F4F4F,
"gray-2": #F4F4F4,
"gray-3": #BDBDBD,
"gray-1": #828282,
"black": #000000,
"gray-4": #F5F5F5,
);
$font-sizes: (
16: 16px,
);
$spacing-types: (
m: margin,
p: padding,
);
$spacing-directions: (
t: top,
r: right,
b: bottom,
l: left,
);
$spacing-sizes: (
10: 10px,
12: 12px,
20: 20px,
54: 54px,
100: 100%,
);
$letter-sizes: (
10: 10px,
)
在scss文件夹，新建reset.scss写入：
@import './_variables.scss';
html,
body {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
width: 100%;
overflow-x: hidden;
}
ul,
p {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
// cursor pointer
.cs-p {
cursor: pointer;
}
// flex style
.d-flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.fd-column {
flex-direction: column;
}
@each $key,
$value in $flex-jc {
.jc-#{$key} {
justify-content: $value;
}
}
@each $key,
$value in $flex-ai {
.ai-#{$key} {
align-items: $value
}
}
// position absolute relation
@each $key,
$value in $ps {
.p-#{$key} {
position: $value;
}
}
// font color
@each $colorKey,
$color in $colors {
.text-#{$colorKey} {
color: $color;
}
}
//font size
@each $sizeKey,
$size in $font-sizes {
.fs-#{$sizeKey} {
font-size: $size
}
}
// margin padding
@each $typeKey,
$type in $spacing-types {
@each $sizeKey,
$size in $spacing-sizes {
// .m-1 p-1 {margin: 10px} {padding: 10px}
.#{$typeKey}-#{$sizeKey} {
#{$type}: $size
}
}
// .mx-1 .my-1 .px-1 .py-1
@each $sizeKey,
$size in $spacing-sizes {
.#{$typeKey}x-#{$sizeKey} {
#{$type}-left: $size;
#{$type}-right: $size;
}
.#{$typeKey}y-#{$sizeKey} {
#{$type}-top: $size;
#{$type}-bottom: $size;
}
}
// .mt-1
@each $directionKey,
$direction in $spacing-directions {
@each $sizeKey,
$size in $spacing-sizes {
.#{$typeKey}#{$directionKey}-#{$sizeKey} {
#{$type}-#{$direction}: $size;
}
}
}
}
// width
@each $sizeKey,
$size in $spacing-sizes {
.w-#{$sizeKey} {
width: $size
}
}
// border .border-top
@each $dir in (top, right, bottom, left) {
.border-#{$dir} {
border-#{$dir}: 2px solid map-get($colors, 'gray-1')
}
}
// background-color .bg-linear
@each $bgKey,
$bgValue in $colors {
.bg-#{$bgKey} {
background: $bgValue
}
}
.v-modal {
display: none;
}
#__nuxt,
html,
body {
min-width: 1440px;
}
.b3size-cover {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.b3size-contain {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
@media only screen and (max-width: 767px) {
#__nuxt,
html,
body {
min-width: 100%;
}
* {
-webkit-tap-highlight-color: transparent;
}
}
// nuxt 路由切换动画
.page-enter-active,
.page-leave-active {
transition: all 0.5s;
}
.page-enter,
.page-leave-active {
opacity: 0;
transform: translateX(80px);
}
如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。
