7个促进Vue3开发更友好的插件(转载)
前言：
网上找到几个好用的插件，这里分享一下。
具体插件：
一、setup name 增强：vite-plugin-vue-setup-extend
Vue3的setup语法糖是个好东西，但使用setup语法带来的第一个问题就是无法自定义name，而我们使用keep-alive往往是需要name的，解决这个问题通常是通过写两个script标签来解决，一个使用setup，一个不使用，但这样必然是不够优雅的。
<script>
</script>
<script setup>
</script>
这时候借助插件vite-plugin-vue-setup-extend可以让我们更优雅的解决这个问题，不用写两个script标签，可以直接在script标签上定义name。
安装:
npm i vite-plugin-vue-setup-extend -D --save
配置:// vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
plugins: [
VueSetupExtend()
]
})
使用:
<script name='abc'>
</script>
<script setup name='abc'>
</script>
二、API 自动导入
setup语法让我们不用再一个一个的把变量和方法都return出去就能在模板上使用，大大的解放了我们的双手。然而对于一些常用的VueAPI，比如ref、computed、watch等，还是每次都需要我们在页面上手动进行import。
我们可以通过unplugin-auto-import实现自动导入，无需import即可在文件里使用Vue的API。
安装:
npm i unplugin-auto-import -D --save
配置:// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
AutoImport({
// 可以自定义文件生成的位置，默认是根目录下，使用ts的建议放src目录下
dts: 'src/auto-imports.d.ts',
imports: ['vue']
})
]
})
安装配置完会自动生成auto-imports.d.ts文件。
// auto-imports.d.ts
// Generated by 'unplugin-auto-import'
// We suggest you to commit this file into source control
declare global {
const computed: typeof import('vue')['computed']
const createApp: typeof import('vue')['createApp']
const customRef: typeof import('vue')['customRef']
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
const defineComponent: typeof import('vue')['defineComponent']
const effectScope: typeof import('vue')['effectScope']
const EffectScope: typeof import('vue')['EffectScope']
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
const getCurrentScope: typeof import('vue')['getCurrentScope']
const h: typeof import('vue')['h']
const inject: typeof import('vue')['inject']
const isReadonly: typeof import('vue')['isReadonly']
const isRef: typeof import('vue')['isRef']
// ...
}
export {}
使用:
<script setup name='abc'>
// 不用import，直接使用ref
const count = ref(0)
onMounted(() => {
console.log('mounted===')
})
</script>
上面我们在vite.config.ts的配置里只导入了vue，imports: ['vue']，除了vue的你也可以根据文档导入其他的如vue-router、vue-use等。
个人建议只对一些比较熟悉的API做自动导入，如vue的API我们在开发时都比较熟悉，闭着眼都能写出来，对于一些不大熟悉的像VueUse这种库，还是使用import更好一些，毕竟编辑器都有提示，不易写错。
解决eslint报错问题
在没有import的情况下使用会导致eslint提示报错，可以通过在eslintrc.js安装插件**vue-global-api**解决。
// 安装依赖
npm i vue-global-api -D --save
// eslintrc.js
module.exports = {
extends: [
'vue-global-api'
]
}
三、告别.value
众所周知，ref要求我们访问变量时需要加上.value，这让很多开发者觉得难受.
let count = ref(1)
const addCount = () => {
count.value += 1
}
后来尤大大也提交了一份新的ref语法糖提案。
ref: count = 1
const addCount = () => {
count += 1
}
该提案一出便引起了社区的一片讨论，时间已经过去很久了，这里就不再废话这个话题了。
这里我介绍的是另外一种写法，也是官方后来出的一种方案，在ref前加上$，该功能默认关闭，需要手动开启。
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue({
refTransform: true // 开启ref转换
})
]
})
开启之后可以这样写：
let count = $ref(1)
const addCount = () => {
count++
}
该语法糖根据不同的版本配置也略有不同，下面贴一下我自己所用相关插件的版本：
"vue": "^3.2.2",
"@vitejs/plugin-vue": "^1.9.0",
"@vue/compiler-sfc": "^3.2.5",
"vite": "^2.6.13"
四、自动导入图片
在Vue2时我们经常会这样引用图片：
<img :src='require("地址")'/>
但在Vite中不支持require了，引用图片变成了下面这样：
<template>
<img :src='imgUrl'/>
</template>
<script setup>
import imgUrl from '地址'
</script>
每次使用图片都得import，显然耽误了大家摸鱼的时间，这时我们可以借助vite-plugin-vue-images来实现自动导入图片。
爽归爽，但容易发生变量冲突，慎用！
安装：
npm i vite-plugin-vue-images -D --save
配置：
// vite.config.ts
import { defineConfig } from 'vite'
import ViteImages from 'vite-plugin-vue-images'
export default defineConfig({
plugins: [
ViteImages({
dirs: ['src/assets/image'] // 指明图片存放目录
})
]
})
使用：
<template>
<img :src='imgUrl'/>
</template>
<script setup>
import imgUrl from '地址'
</script>
五、忽略.vue后缀
相信很多人在Vue2开发时，导入文件都是忽略.vue后缀的。但在Vite里，忽略.vue后缀会引起报错。
import Home from '@/views/home' // error
import Home from '@/views/home.vue' // ok
根据尤大大的回答，必须写后缀其实是故意这么设计的，也就是提倡大家这么去写。
但如果你真的不想写，官方也是提供了支持的。
// vite.config.ts
import { defineConfig } from 'vite'
export default defineConfig({
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
}
})
这里要注意，手动配置extensions要记得把其他类型的文件后缀也加上，因为其他类型如js等文件默认是可以忽略后缀导入的，不写上的话其他类型文件的导入就变成需要加后缀了。
虽然可以这么做，不过毕竟官方文档说了不建议忽略.vue后缀，所以建议大家在实际开发中还是老老实实写上.vue。
六、vite项目gzip打包优化
参考来源：https://www.kuxiaoxin.com/archives/74
安装：
npm install vite-plugin-compression -D
使用：
build\vite\plugin\compress.ts：
/**
* Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
* https://github.com/anncwb/vite-plugin-compression
*/
import type { Plugin } from 'vite';
import compressPlugin from 'vite-plugin-compression';
export function configCompressPlugin(compress: 'gzip' | 'brotli' | 'none'): Plugin | Plugin[] {
const compressList = compress.split(',');
const plugins: Plugin[] = [];
if (compressList.includes('gzip')) {
plugins.push(
compressPlugin({
ext: '.gz',
})
);
}
if (compressList.includes('brotli')) {
plugins.push(
compressPlugin({
ext: '.br',
algorithm: 'brotliCompress',
})
);
}
return plugins;
}
配置Vite
build\vite\plugin\index.ts：
// ...
import { configCompressPlugin } from './compress';
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
// ...
// The following plugins only work in the production environment
if (isBuild) {
// ...
// rollup-plugin-gzip
vitePlugins.push(configCompressPlugin(VITE_BUILD_COMPRESS));
}
return vitePlugins;
}
七、使用svg icon(包括element-plus icon)
参考链接：https://www.jianshu.com/p/0269d18f0ab1
安装
npm i @element-plus/icons-vue -S
npm i vite-plugin-svg-icons -D使用
- vite.config.ts 中的配置插件
import path from 'path';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'; // 版本不同引入方式不同
export default defineConfig({
...
plugins: [
...
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]'
})
]
});
且按照iconDirs中路径准备好svg文件
创建引入全部element-plus文件，以及创建SvgIcon组件
在components文件夹下创建如下文件
components/SvgIcon/svgicon.ts文件内容如下
// 注册所有 @element-plus/icons-vue 图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import { App } from 'vue';
export default {
install: (app: App<Element>) => {
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component);
}
}
};
components/SvgIcon/index.vue文件内容如下
// 注册自定义图标
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName" :fill="color" />
</svg>
</template>
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
iconClass: { // 图标名称与assets/icon/svg下使用的文件名一致
type: String,
required: true
},
className: { // 给图标添加class
type: String,
default: ''
},
color: { // 设置图标颜色
type: String,
default: '#333'
}
});
const iconName = computed(() => {
return `#icon-${props.iconClass}`;
});
const svgClass = computed(() => {
if (props.className) {
return `svg-icon ${props.className}`;
}
return 'svg-icon';
});
</script>
<style scope lang="scss">
.sub-el-icon,
.nav-icon {
display: inline-block;
font-size: 15px;
margin-right: 12px;
position: relative;
}
.svg-icon {
width: 1em;
height: 1em;
position: relative;
fill: currentColor;
vertical-align: -2px;
}
</style>
在main.ts中引入
// 注册所有图标
import 'virtual:svg-icons-register'; // 引入注册脚本
import SvgIcon from '@/components/SvgIcon/index.vue';
import elementIcons from '@/components/SvgIcon/svgicon';
app.component('SvgIcon', SvgIcon);
app.use(elementIcons);
使用方法
// 自定义的svg图标
<svg-icon icon-class="lock" class="loack-icon"></svg-icon>
// element-plus图标
<el-icon><user-filled /></el-icon>
————————————————
版权声明：本文为CSDN博主「Ponnenult」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44727080/article/details/123197447
