让vue3更好用的vite插件
# 1 vite-plugin-vue-setup-extend
解决 vue3 下 script setup 语法糖 下 ，手动设置组件 name 不方便的问题
# 安装：
npm i vite-plugin-vue-setup-extend -D
1
# 配置：vite.config.ts 文件中
import setupExtend from 'vite-plugin-vue-setup-extend';
export default defaultConfig({
plugins: [
...
setupExtend()
],
})
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 2 unplugin-auto-import
自动导入插件，可实现不用引入直接使用 ref watch computed router 等等...
# 安装：
npm i unplugin-auto-import -D
1
# 配置：
export default defaultConfig({
plugins:[
AutoImport({
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue$/,
/\.vue\?vue/, // .vue
/\.md$/ // .md
],
// global imports to register
imports: ['vue', 'vue-router'],
eslintrc: {
enabled: false, // 会生成eslintrc文件 filepath 配置文件名
filepath: './.eslintrc-auto-import.json',
globalsPropValue: true
}
}),
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
用了自动引入后 eslint 和 ts 会报错 解决方法如下：
把上面生成的 ./.eslintrc-auto-import.json 加入到 eslint 配置里面 .eslintrc.js 文件中
extends: [
...
'./.eslintrc-auto-import.json'
],
1
2
3
4
2
3
4
在 tsconfig.json 文件中 auto-imports.d.ts 会自动生成
"include": [..., "auto-imports.d.ts"],
1
# 3 unplugin-vue-components
实现 vue 组件库的自动按需导入，这样就不用手动导入了
# 安装：
npm i unplugin-vue-components -D
1
# 配置：
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: [
'vue',
'vue-router',
{
vuex: ['useStore']
}
],
resolvers: [ElementPlusResolver()],
dts: false
}),
Components({
resolvers: [ElementPlusResolver()]
}),
]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 4 vite-plugin-compression
静态资源压缩
# 安装：
npm i vite-plugin-compression -D
1
# 配置：
// 静态资源压缩
import viteCompression from 'vite-plugin-compression';
export default defineConfig({
plugins: [
...
viteCompression({
verbose: true,
disable: false, // 不禁用压缩
deleteOriginFile: false, // 压缩后是否删除原文件
threshold: 10240, // 压缩前最小文件大小
algorithm: 'gzip', // 压缩算法
ext: '.gz' // 文件类型
})
],
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 5 rollup-plugin-visualizer
打包分析
# 安装：
npm i rollup-plugin-visualizer -D
1
# 配置：
import visualizer from 'rollup-plugin-visualizer';
export default defineConfig({
plugins: [
...
visualizer({
// 打包后自动打开分析报告
open: true
})
],
});
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 6 vite-plugin-vue-images : 有点小问题
图片自动导入，配置后图片可直接使用
# 安装：
npm i vite-plugin-vue-images -D
1
# 配置：
// vite.config.ts
import { defineConfig } from 'vite'
import ViteImages from 'vite-plugin-vue-images'
export default defineConfig({
plugins: [
ViteImages({
dirs: ['src/assets/image'] // 指明图片存放目录
})
]
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 使用：注意用大写开头，惨痛教训
<template>
<div class="home">
<img :src="Logo" />
<img :src="TestName1" />
</div>
</template>
<script setup lang="ts">
import Logo from '@/assets/logo.png'
import TestName1 from '@/assets/test/name1.jpg'
</script>
<style lang="less" scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 7 vue-global-api
unplugin-auto-import 插件的继承者，解决因为它的自动导入导致的 eslint 报错
# 安装:
npm i vue-global-api
1
# 配置：main.ts 添加
import 'vue-global-api'
编辑 (opens new window)
上次更新: 5/31/2022, 12:12:23 PM