nuxt图片压缩优化、nuxt按需引入element

按需引入element"/>

nuxt图片压缩优化、nuxt按需引入element

本文目录

• 一、nuxt开发图片压缩优化
• 二、nuxt按需引入element-ui
• 三、nuxt中使用aos动画库
• 四、scss配置文件（变量、样式）

一、nuxt开发图片压缩优化

1、运行命令npm install --save-dev @aceforth/nuxt-optimized-images：安装开发时压缩图片到依赖。
2、在nuxt中写入如下代码：

buildModules: ['@aceforth/nuxt-optimized-images',],optimizedImages: {optimizeImages: true}

3、接着安装你需要压缩到图片格式

我这里图片都是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>

四、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);}

如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。