Schisandra-Cloud-Storage/schisandra-cloud-storage-front-vue
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🔧工具(deps): add unplugin-imagemin

Browse Source 
unplugin-imagemin +
vite-plugin-imagemin -
This commit is contained in:
landaiqing
2024-03-21 13:18:46 +08:00
parent 3e0dba1b56
commit c0ea4c40b0
15 changed files with 1569 additions and 2461 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintignore
View File

@@ -8,4 +8,6 @@
**/node_modules/*
/bower_components/*
**/bower_components/*
/assets/svg/*
/assets/*

2
package.json
View File

@@ -54,9 +54,9 @@
"terser": "^5.29.2",
"typescript": "^5.2.2",
"unplugin-auto-import": "^0.17.5",
"unplugin-imagemin": "^0.5.18",
"unplugin-vue-components": "^0.26.0",
"vite": "^5.1.6",
"vite-plugin-imagemin": "^0.6.1",
"vue-tsc": "^1.8.27"
},
"config": {

3389
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

2
postcss.config.js → postcss.config.cjs
View File

@@ -1,4 +1,4 @@
//postcss.config.js
//postcss.config.cjs
module.exports = {
plugins: {
autoprefixer: {

78
public/schisandra.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

0
src/assets/img/wallhaven.jpg → src/assets/image/wallhaven.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 MiB

After

Width:  |  Height:  |  Size: 2.0 MiB

77
src/assets/svg/schisandra.svg Normal file
View File

@@ -0,0 +1,77 @@
<svg t="1710925923326" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8087"
width="200" height="200">
<path
d="M481.866 554.39C307.518 329.956 137.124 467.312 87.72 516.212c-8.342 8.258-4.326 23.352 8.838 33.298 79.538 60.1 340.138 238.074 393.422 34.128 2.33-8.918-0.66-19.652-8.114-29.248z"
fill="#CCC033" p-id="8088"></path>
<path
d="M481.866 554.388C307.518 329.956 137.124 467.312 87.72 516.212c-5.48 5.424-5.598 13.796-1.32 21.726 78.098-41.21 195.85-57.526 315.466 96.452 7.456 9.598 10.446 20.33 8.116 29.25a207.5 207.5 0 0 1-3.572 12.14c38.236-8.552 68.836-35.732 83.572-92.14 2.328-8.92-0.662-19.654-8.116-29.252z"
fill="#99AF17"></path>
<path
d="M608.99 589.628c107.374 263.132 308.492 176.808 369.252 143.04 10.26-5.702 10.462-21.32 0.468-34.448-60.388-79.32-263.344-320.97-369.648-138.946-4.648 7.96-4.662 19.102-0.072 30.354z"
fill="#EACF32" p-id="8090"></path>
<path
d="M820.558 537.238c-74.148-52.542-155.996-73-211.496 22.036-4.648 7.96-4.664 19.102-0.072 30.354 46.838 114.78 111.512 163.062 174.594 178.224-25.672-20.84-50.152-50.102-71.994-90.258 15.608-16.372 25.21-38.522 25.21-62.93a90.812 90.812 0 0 0-17.646-53.916 135.364 135.364 0 0 0-7.852 7.886c32.054-34.944 70.066-41.51 109.256-31.396z m-128.932 98.73z m17.05 36.168z m-16.4-34.654z m2.712 6.244z m2.65 5.892z m2.686 5.77z m2.722 5.648z m2.786 5.59z m1.73-93.752z m-18.5 26.4z m4.286-6.992z m3.516-5.332z m3.498-4.94z m3.564-4.688z"
fill="#CCC033" p-id="8091"></path>
<path
d="M65.508 873.848C533.44 700.74 756.58 451.128 824.804 362c13.046-17.044 7.766-41.7-11.132-51.876l-0.006-0.004c-15.116-8.14-33.912-4.076-44.27 9.616-55.86 73.84-256.384 304.032-719.526 516.368-10.962 5.026-15.234 18.396-9.188 28.83 4.996 8.622 15.482 12.37 24.826 8.914z"
fill="#A56021" p-id="8092"></path>
<path d="M494.452 523.422m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF4B34"
p-id="8093"></path>
<path d="M469.542 645.53m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF624B"
p-id="8094"></path>
<path
d="M61.034 874.934c455.172-210.888 652.954-437.954 708.36-511.196 10.358-13.692 29.154-17.756 44.27-9.616l0.006 0.004a34.662 34.662 0 0 1 10.486 8.712l0.646-0.838c13.046-17.044 7.766-41.698-11.132-51.876l-0.006-0.004c-15.116-8.14-33.912-4.076-44.27 9.616-55.86 73.84-256.384 304.032-719.526 516.368-10.962 5.026-15.234 18.396-9.188 28.832 4.21 7.262 12.316 11.046 20.354 9.998z"
fill="#8C4C17" p-id="8095"></path>
<path
d="M528.2 528.198c-243.476-146.586-127.232-332.026-84.516-386.866 7.214-9.26 22.676-7.056 34.11 4.84 69.084 71.874 276.624 309.598 80.41 386.626-8.58 3.368-19.592 1.668-30.004-4.6z"
fill="#CCC033" p-id="8096"></path>
<path d="M479.496 727.3m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF624B"
p-id="8097"></path>
<path
d="M456.826 708.832c24.952-30.628 65.664-40.844 100.914-28.496a91.066 91.066 0 0 0-20.616-23.774c-39.068-31.828-96.538-25.958-128.366 13.11-31.826 39.068-25.958 96.54 13.11 128.366a91.02 91.02 0 0 0 27.452 15.384c-19.22-32.026-17.446-73.962 7.506-104.59z"
fill="#FF4B34" p-id="8098"></path>
<path
d="M490.916 794.086a12.004 12.004 0 0 1-11.27-7.88 11.998 11.998 0 0 1 7.148-15.392c17.892-6.544 29.342-15.336 34.034-26.128 4.95-11.388 0.736-21.612 0.554-22.042-2.728-6.04-0.014-13.084 6.026-15.812 6.04-2.73 13.176 0.02 15.904 6.06 0.896 1.986 8.51 20.002-0.222 40.774-7.29 17.338-23.456 30.692-48.05 39.688a12.046 12.046 0 0 1-4.124 0.732z"
fill="#FF9079" p-id="8099"></path>
<path d="M403.212 559.58m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF624B"
p-id="8100"></path>
<path
d="M375.942 570.134c-14.258-36.844-2.978-77.274 25.202-101.786a91.07 91.07 0 0 0-30.864 6.142c-46.994 18.188-70.348 71.026-52.16 118.022 18.188 46.994 71.028 70.348 118.022 52.16a91.034 91.034 0 0 0 26.958-16.234c-37.34 0.842-72.9-21.462-87.158-58.304z"
fill="#FF4B34" p-id="8101"></path>
<path
d="M456.478 588.782a12 12 0 0 1-11.846-14c3.204-18.978 1.164-33.372-6.064-42.784-7.416-9.656-18.42-11.092-18.528-11.102a12 12 0 0 1 2.246-23.894c2.168 0.204 21.592 2.508 35.316 20.378 11.456 14.916 15.054 35.574 10.694 61.398a12.004 12.004 0 0 1-11.818 10.004z"
fill="#FF9079" p-id="8102"></path>
<path
d="M491.586 160.806a1040.528 1040.528 0 0 0-13.792-14.636c-11.434-11.896-26.898-14.1-34.11-4.838-42.716 54.84-158.958 240.28 84.516 386.866 10.412 6.268 21.424 7.968 30.004 4.6 8.192-3.216 15.664-6.718 22.486-10.47-208.196-131.322-136.172-291.618-89.104-361.522z"
fill="#99AF17" p-id="8103"></path>
<path d="M605.562 614.662m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF624B"
p-id="8104"></path>
<path
d="M576.32 614.664c0-39.506 25.112-73.14 60.24-85.83a91.062 91.062 0 0 0-31-5.41c-50.39 0-91.24 40.85-91.24 91.24 0 50.39 40.85 91.24 91.24 91.24 10.886 0 21.322-1.914 31-5.412-35.128-12.69-60.24-46.324-60.24-85.828z"
fill="#FF4B34" p-id="8105"></path>
<path
d="M649.002 661.926a12 12 0 0 1-10.302-18.136c9.74-16.376 13.064-30.422 9.884-41.752-3.356-11.954-13.08-17.222-13.492-17.44-5.93-2.96-8.276-10.134-5.316-16.064 2.958-5.93 10.224-8.306 16.158-5.346 1.95 0.974 19.232 10.132 25.582 31.75 5.3 18.046 1.2 38.61-12.188 61.12a11.992 11.992 0 0 1-10.326 5.868z"
fill="#FF9079" p-id="8106"></path>
<path d="M378.3 797.142m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF624B"
p-id="8107"></path>
<path
d="M349.704 791.034c8.252-38.634 39.836-66.28 76.842-71.352a91.028 91.028 0 0 0-29.186-11.768c-49.28-10.526-97.762 20.888-108.288 70.168-10.526 49.278 20.888 97.762 70.168 108.288a91.04 91.04 0 0 0 31.446 1.184c-31.702-19.75-49.234-57.886-40.982-96.52z"
fill="#FF4B34" p-id="8108"></path>
<path
d="M413.426 852.702a12 12 0 0 1-8.802-20.152c12.944-13.98 19.13-27.022 18.388-38.766-0.784-12.392-9.194-19.574-9.55-19.874-5.18-4.134-5.976-11.64-1.842-16.822 4.134-5.18 11.736-5.986 16.918-1.854 1.704 1.358 16.69 13.926 18.384 36.396 1.414 18.756-6.892 38.008-24.686 57.224a11.968 11.968 0 0 1-8.81 3.848z"
fill="#FF9079" p-id="8109"></path>
<path d="M277.996 678.872m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF624B"
p-id="8110"></path>
<path
d="M248.754 678.872c0-39.506 25.112-73.14 60.24-85.83a91.062 91.062 0 0 0-31-5.41c-50.39 0-91.24 40.85-91.24 91.24 0 50.39 40.85 91.24 91.24 91.24 10.886 0 21.322-1.914 31-5.412-35.128-12.688-60.24-46.322-60.24-85.828z"
fill="#FF4B34" p-id="8111"></path>
<path
d="M321.438 726.136a12 12 0 0 1-10.302-18.136c9.738-16.374 13.064-30.422 9.884-41.752-3.356-11.956-13.08-17.222-13.492-17.44-5.93-2.96-8.276-10.136-5.316-16.064 2.96-5.93 10.226-8.306 16.158-5.346 1.95 0.974 19.232 10.132 25.582 31.752 5.3 18.046 1.2 38.61-12.186 61.12a12.006 12.006 0 0 1-10.328 5.866z"
fill="#FF9079" p-id="8112"></path>
<path d="M557.74 439.404m-30 0a30 30 0 1 0 60 0 30 30 0 1 0-60 0Z" fill="#99AF17" p-id="8113"></path>
<path d="M494.478 368.528m-30 0a30 30 0 1 0 60 0 30 30 0 1 0-60 0Z" fill="#99AF17" p-id="8114"></path>
<path d="M785.856 674.864m-30 0a30 30 0 1 0 60 0 30 30 0 1 0-60 0Z" fill="#CCC033" p-id="8115"></path>
<path
d="M927.274 710.09a11.966 11.966 0 0 1-8.664-3.696l-65.998-68.844a12 12 0 0 1 17.324-16.608l65.998 68.844a12 12 0 0 1-8.66 20.304z"
fill="#FCE575" p-id="8116"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

4
src/components/svgIcon/svgIcon.less
View File

@@ -1,7 +1,7 @@
.svg-icon {
// svg 图标默认宽高，根据个人使用情况自行调整
width: 20px;
height: 20px;
width: 100px;
height:100px;
fill: currentColor;
overflow: hidden;
}

6
src/views/login/LoginPage.vue
View File

@@ -1,15 +1,19 @@
<script lang="ts">
import { defineComponent } from 'vue'
import SvgIcon from '@/components/svgIcon/SvgIcon.vue'
export default defineComponent({
name: 'LoginPage'
name: 'LoginPage',
components: { SvgIcon }
})
</script>
<template>
<div>
<svg-icon icon-class="schisandra" class-name="icon"></svg-icon>
<h1>Login</h1>
<h2>测试页面，看到这个，那么项目就成功跑起来了</h2>
<img style="width: 300px; height: 200px" src="@/assets/image/wallhaven.jpg" />
</div>
</template>

12
src/vite-env.d.ts vendored
View File

@@ -12,3 +12,15 @@ declare module '*.vue' {
const component: DefineComponent<{}, {}, any>
export default component
}
declare module '*.svg' {
const content: any
export default content
}
declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'

1
tsconfig.json
View File

@@ -40,6 +40,7 @@
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.d.ts",
"src/**/*.vue",
"auto-import.d.ts"
],

51
vite.config.mts
View File

@@ -16,7 +16,7 @@ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import autoprefixer from 'autoprefixer'
import viteCompression from 'vite-plugin-compression'
import viteImagemin from 'vite-plugin-imagemin'
import imagemin from 'unplugin-imagemin/vite'
export default defineConfig(({ mode, command }) => {
const env = loadEnv(mode, process.cwd())
@@ -45,33 +45,30 @@ export default defineConfig(({ mode, command }) => {
},
plugins: [
vue(),
viteImagemin({
gifsicle: { // gif图片压缩
optimizationLevel: 3, // 选择1到3之间的优化级别
interlaced: false // 隔行扫描gif进行渐进式渲染
// colors: 2 // 将每个输出GIF中不同颜色的数量减少到num或更少。数字必须介于2和256之间。
imagemin({
// Default mode sharp. support squoosh and sharp
mode: 'sharp',
beforeBundle: true,
// Default configuration options for compressing different pictures
compress: {
jpg: {
quality: 10
},
jpeg: {
quality: 10
},
png: {
quality: 10
},
webp: {
quality: 10
}
},
optipng: { // png
optimizationLevel: 7 // 选择0到7之间的优化级别
},
mozjpeg: {// jpeg
quality: 20 // 压缩质量，范围从0(最差)到100(最佳)。
},
pngquant: {// png
quality: [0.8, 0.9], // Min和max是介于0(最差)到1(最佳)之间的数字，类似于JPEG。达到或超过最高质量所需的最少量的颜色。如果转换导致质量低于最低质量，图像将不会被保存。
speed: 4 // 压缩速度，1(强力)到11(最快)
},
svgo: { // svg压缩
plugins: [
{
name: 'removeViewBox'
},
{
name: 'removeEmptyAttrs',
active: false
}
]
}
conversion: [
{ from: 'jpeg', to: 'webp' },
{ from: 'png', to: 'webp' },
{ from: 'JPG', to: 'jpeg' }
]
}),
viteCompression({
verbose: true, // 是否在控制台中输出压缩结果