vite：15个插件推荐
1. vite-plugin-restart
import ViteRestart from 'vite-plugin-restart'
export default {plugins: [ViteRestart({restart: ['my.config.[jt]s',]})],
};
2. unplugin-vue-components
npm i unplugin-vue-components -D
import Components from 'unplugin-vue-components/vite'
// ui库解析器，也可以自定义，需要安装相关UI库，unplugin-vue-components/resolvers
// 提供了以下集中解析器，使用的时候，需要安装对应的UI库，这里以vant示例
// 注释的是包含的其他一些常用组件库，供参考
import {// ElementPlusResolver,// AntDesignVueResolver,VantResolver,// HeadlessUiResolver,// ElementUiResolver
} from 'unplugin-vue-components/resolvers'export default ({ mode }) => defineConfig({plugins: [Components({dirs: ['src/components'], // 目标文件夹extensions: ['vue','jsx'], // 文件类型dts: 'src/components.d.ts', // 输出文件，里面都是一些import的组件键值对// ui库解析器，也可以自定义，需要安装相关UI库resolvers: [VantResolver(),// ElementPlusResolver(),// AntDesignVueResolver(),// HeadlessUiResolver(),// ElementUiResolver()],})]
})
原先引用组件的时候需要在目标文件里面import相关组件，现在就可以直接使用无需在目标文件import了，注意大小写，组件都是大写开始的。
3. vite-plugin-style-import
当你使用unplugin-vue-components来引入ui库的时候，message, notification，toast 等引入样式不生效。
安装vite-plugin-style-import，实现message, notification，toast 等引入样式自动引入
npm i vite-plugin-style-import -D
import styleImport, {// AndDesignVueResolve,VantResolve,// ElementPlusResolve,// NutuiResolve,// AntdResolve
} from 'vite-plugin-style-import'export default ({ mode }) => defineConfig({plugins: [styleImport({resolves: [// AndDesignVueResolve(),VantResolve(),// ElementPlusResolve(),// NutuiResolve(),// AntdResolve()],})]
})
4. unplugin-auto-import
支持vue, vue-router, vue-i18n, @vueuse/head, @vueuse/core等自动引入
// 引入前
import { ref, computed } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)//引入后
const count = ref(0)
const doubled = computed(() => count.value * 2)
import AutoImport from 'unplugin-auto-import/vite'
export default ({ mode }) => defineConfig({plugins: [AutoImport({imports: ['vue', 'vue-router', 'vuex', '@vueuse/head'],// 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'dts: 'src/auto-import.d.ts'}),]
})
5. vite-plugin-svg-icons
用于生成 svg 雪碧图，方便在项目中使用 .svg 文件。
按照文档配置好后，搭配阿里巴巴矢量图标库使用，只需把下载好的 svg 文件丢到指定目录，然后就可以项目中愉快的使用了。
npm i vite-plugin-svg-icons -D
import { defineConfig,loadEnv } from 'vite'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons';
const path = require("path");
export default ({ mode }) => defineConfig({plugins: [vue(),createSvgIconsPlugin({// Specify the icon folder to be cachediconDirs: [path.resolve(process.cwd(), 'src/svg')],// Specify symbolId formatsymbolId: 'icon-[dir]-[name]'})]
})
import 'virtual:svg-icons-register'
<template><svg class="svg-icon" aria-hidden="true"><use :href="symbolId" /></svg>
</template><script setup lang="ts" name="SvgIcon">import { computed } from 'vue'const props = defineProps({prefix: {type: String,default: 'icon'},name: {type: String,required: true},})const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>
<style scope>.svg-icon {width: 1em;height: 1em;vertical-align: -0.1em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */fill: currentColor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */overflow: hidden;}
</style>
在目录src下新建svg文件夹，在阿里巴巴矢量图标库 下载order.svg图标，放入svg文件夹内。
<template><div class="home"><svg-icon name="order" class="icon"></svg-icon></div>
</template><script setup lang="ts">
// 示例使用了unplugin-vue-components/vite插件自动引入自定义组件
</script><style lang="less" scoped>
.icon{font-size: 200px;color: #ff0000;
}
</style>
6. vite-plugin-html
一个针对 index.html，提供压缩和基于 ejs 模板功能的 vite 插件。
通过搭配 .env 文件，可以在开发或构建项目时，对 index.html 注入动态数据，例如替换网站标题。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" href="./favicon.ico" /><link rel="stylesheet" href="./public/reset.css"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title><%- title %></title></head><body><div id="app"></div><%- injectScript %></body>
</html>
import { defineConfig,loadEnv} from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'
export default ({ mode }) => defineConfig({// mode 环境变量名，若配置有.env.test，启动时 --mode test，这里的mode就是testplugins: [createHtmlPlugin({minify: true,/*** 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除* @default src/main.ts*/entry: '/src/main.ts',/*** 需要注入 index.html ejs 模版的数据*/inject: {data: {// 查找.env.test文件里面的VITE_PROJECT_TITLE，请以VITE_标识开头title: loadEnv(mode, process.cwd()).VITE_PROJECT_TITLE, injectScript: `<script src="/inject.js"></script>`,},},})]
})
7. vite-plugin-compression
npm i vite-plugin-compression -D
import { defineConfig,loadEnv} from 'vite'
import viteCompression from 'vite-plugin-compression';
export default ({ mode }) => defineConfig({plugins: [viteCompression()]
})
8. vite-plugin-imagemin
国内用户安装需要在电脑host文件（C：\Windows\System32\drivers\etc）上加下以下配置：
199.232.4.133 raw.githubusercontent.com
我自己安装的时候发现还是不行，然后还是选择了他不推荐的cnpm安装成功了- -
import { defineConfig,loadEnv} from 'vite'
import viteImagemin from 'vite-plugin-imagemin'
export default ({ mode }) => defineConfig({plugins: [viteImagemin({gifsicle: { // gif图片压缩optimizationLevel: 3, // 选择1到3之间的优化级别interlaced: false, // 隔行扫描gif进行渐进式渲染// colors: 2 // 将每个输出GIF中不同颜色的数量减少到num或更少。数字必须介于2和256之间。},optipng: { // pngoptimizationLevel: 7, // 选择0到7之间的优化级别},mozjpeg: {// jpegquality: 20, // 压缩质量，范围从0(最差)到100(最佳)。},pngquant: {// pngquality: [0.8, 0.9], // Min和max是介于0(最差)到1(最佳)之间的数字，类似于JPEG。达到或超过最高质量所需的最少量的颜色。如果转换导致质量低于最低质量，图像将不会被保存。speed: 4, // 压缩速度，1(强力)到11(最快)},svgo: { // svg压缩plugins: [{name: 'removeViewBox',},{name: 'removeEmptyAttrs',active: false,},],},}),]
})
9. vite-plugin-purge-icons
此插件是可以让我们很方便高效的使用Iconify中所有的图标（本人表示没有用过…）。
10. @vitejs/plugin-vue-jsx
import { defineConfig,loadEnv} from 'vite'
import vuejsx from "@vitejs/plugin-vue-jsx"
export default ({ mode }) => defineConfig({plugins: [vuejsx()]
})
jsx文件：
（jsx组件中自动跳过生命周期，即jsx中没有生命周期，在父组件onBeforeMount后执行）
const component = (props:any,context:any) => {console.log(props)const onClick = () => { context.emit('update')}return <divstyle={{fontSize: 12,color: '#999'}}onClick={()=>onClick()}>我是jsx函数组件{props.text}</div>
}export default component
11. vite-plugin-vue-setup-extend
setup语法糖name增强，使vue3语法糖支持name属性。
vue3语法糖默认是没有name属性的，在我们使用keep-alive的时候需要用到name。
npm i vite-plugin-vue-setup-extend -D
import { defineConfig} from 'vite'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
export default ({ mode }) => defineConfig({plugins: [vueSetupExtend()]
}
<script setup lang="ts" name="home">
</script>
12. vitejs-plugin-legacy
Vite默认的浏览器支持基线是原生ESM。该插件为不支持原生ESM的传统浏览器提供支持。
13. @vitejs/plugin-vue
14. vite-plugin-vue-images
npm i vite-plugin-vue-images -D
import { defineConfig,loadEnv} from 'vite'
import ViteImages from 'vite-plugin-vue-images'
export default ({ mode }) => defineConfig({plugins: [ViteImages({dirs: ['src/assets'], // 图像目录的相对路径extensions: ['jpg', 'jpeg', 'png', 'svg', 'webp'], // 有效的图像扩展customResolvers:[], // 覆盖名称->图像路径解析的默认行为customSearchRegex: '([a-zA-Z0-9]+)', // 重写搜索要替换的变量的Regex。}),]
name1.jpg： src/assets/test/name1.jpg
<template><div class="home"><img :src="Logo" /><img :src="TestName1" /> </div>
</template><script setup lang="ts">
</script><style lang="less" scoped>
</style>
<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>
15. vue-global-api
unplugin-auto-import插件的继承者，解决因为它的自动导入导致的eslint报错
import 'vue-global-api'
vite：15个插件推荐相关推荐
- python七大神级插件_IntelliJ IDEA 15款超级牛逼插件推荐（自用，超级牛逼）
满满的都是干货 所有插件都是在 ctrl+alt+s 里的plugins 里进行搜索安装 1.CodeGlance 代码迷你缩放图插件 2. Codota 代码提示工具,扫描你的代码后,根据你的 ...
- idea服务器性能插件,IntelliJ IDEA 15款超级牛逼插件推荐（自用，超级牛逼）
满满的都是干货 所有插件都是在 ctrl+alt+s 里的plugins 里进行搜索安装 1.CodeGlance 代码迷你缩放图插件 2. Codota 代码提示工具,扫描你的代码后,根据你的 ...
- 开发人员应该知道的15个吸引力的jquery lightbox插件推荐
jQuery 是非常流行的JS框架,其俨然已成了开发者的必备工具,其中的jQuery Lightbox插件更是为广大开发者所喜爱.它惊人的特征之一是jQuery Lightbox插件有很多变化.你可以 ...
- vscode运行html的插件_vscode前端常用插件推荐，搭建JQuery、Vue等开发环境
vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器.当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,edit ...
- Vue3插件推荐和介绍
文章目录 前言 一.项目搭建 二.插件推荐 vite-plugin-pages 1.安装 2.配置 路由规则: 基本路由: 索引路由: 动态路由: vite-plugin-vue-layouts 安装 ...
- 谷歌浏览器及wordpress等插件推荐集合
FireFox&chrome浏览器必备插件推荐 一.Firefox 对于普通用户: Adblock Plus屏蔽广告 2.DownThemAll!下载插件 3.FlashGot下载选择器,不过 ...
- java 插件11.45.2.14_IntelliJ IDEA 2020.2.4款 神级超级牛逼插件推荐
原标题:IntelliJ IDEA 2020.2.4款 神级超级牛逼插件推荐 正文如下: 满满的都是干货 所有插件都是在 ctrl+alt+s 里的plugins 里进行搜索安装 1.CodeGlan ...
- vscode插件推荐(个人使用)
前言 现在市面上的vscode推荐五花八门,八成的推荐都是cv出来的,毫无任何的意义,所以在这里自己整理一份属于自己的vscode插件推荐,可以给各位难兄难弟一点小小的建议 以下插件顺序不分先后,纯粹 ...
- Android Studio插件推荐
这里记录那些可以显著提升Android开发效率的Studio插件,好的插件和快捷键可以提高效率,缩短开发周期.这里介绍的插件大部分都可以通过Studio的插件市场下载安装,安装方法如下: in And ...
- flutter开发vscode插件推荐（开发必备）
这里是坚果前端小课堂,大家喜欢的话,可以关注我的公众号"坚果前端,",或者加我好友,获取更多精彩内容 vscode开发插件推荐 扩展是完成工作的快捷方式.许多扩展有助于减少重复性工 ...
最新文章
- Nacos注册中心——启动相关的配置
- 数据中台（四）数栈，企业级一站式数据中台PaaS
- 计算机基本信息的获取
- .NET Core Agent
- 原来嵌套个网页的技术是这样的
- python中的以简单例子解释函数参数、函数定义、函数返回值、函数调用
- java中字符串（2）String
- Notepad++在线安装使用JSON插件
- 把github转至gitee
- 百胜erp加密狗驱动_百胜分销系统ERP_DRP用户手册.pdf
- Qt调用工业相机之相机的触发模式及代码实现
- 凤凰网视频直播视频流
- 回收站的文件删了怎么恢复，回收站文件恢复的两种方法
- java 无法加载dll_java中调用本地动态链接库（*.DLL）的两种方式详解和not found library、打包成jar,war包dll无法加载等等问题解决办法...
- 最酷网学习，如何做一个轮播
- Visual Studio 历史简介
- 建模教程_Zbrush沼泽猎人角色制作教程
- 【java初学】面向对象了解
- 段、页、页框、页表、页表项
- python编程源码