收下这7款插件,让你在使用 Vite 的时候如虎添翼
相信已经有不少小伙伴已经开始用 Vue3 做开发了,也一定使用上 Vite 了,而我今天要介绍的这几款插件,能让你在使用 Vite 做开发时如虎添翼。
vite-plugin-restart
通过监听文件修改,自动重启 vite 服务。
最常用的场景就是监听 vite.config.js
和 .env.development
文件,我们知道,修改 vite 配置文件和环境配置文件,是需要重启 vite 才会生效,通过这个插件,我们将从反复重启中解脱出来。
unplugin-vue-components
组件自动按需导入。
按照官方的例子,我们可以直接在代码中调用组件,而无需导入并注册,这个插件会自动帮助我们做这些事,你可以直接这样编写代码:
<template>
<div>
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
而代码最终会编译成这样:
<template>
<div>
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</div>
</template>
<script>
import HelloWorld from './src/components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
这个插件基本让我们告别全局组件注册了,因为有时候为了偷懒,我们会将组件注册到全局,这样在使用的时候就无需导入并注册,弊端就是如果全局组件过多会导致首页加载较慢,而这个插件就很巧妙的解决了这一问题。
vite-plugin-svg-icons
用于生成 svg 雪碧图,方便在项目中使用 .svg
文件。
按照文档配置好后,搭配阿里巴巴矢量图标库使用,只需把下载好的 svg 文件丢到指定目录,然后就可以项目中愉快的使用了。
vite-plugin-spritesmith
css 雪碧图生成。
这是一个濒临淘汰的技术,因为 HTTP/2 里多路复用特性,已经不太需要使用精灵图合并了。当然如果你依旧有这使用需求,这个插件可以满足你的需要。
vite-plugin-mock
提供了本地和生产 mock 服务。
优势在于本地使用,与传统使用 mockjs 不同,是可以真实在浏览器里看到请求记录,大大提高了开发效率。
vite-plugin-html
一个针对 index.html,提供压缩和基于 ejs 模板功能的 vite 插件。
通过搭配 .env
文件,可以在开发或构建项目时,对 index.html 注入动态数据,例如替换网站标题。
vite-plugin-compression
使用 gzip
或者 brotli
来压缩资源。
这个不用多介绍了,可以让项目在构建时直接生成压缩文件。
最后
上面介绍的这 7 款 vite 插件,如果有超过一半的插件你打算尝试使用的话,建议你可以了解下 Fantastic-template 这款基于 vue3 + vite2 的项目模板,模板里默认集成了上面介绍的所有插件。
收下这7款插件,让你在使用 Vite 的时候如虎添翼的更多相关文章
- 分享个谷歌浏览器下的一款插件PostMan
用作POST GET调试非常好用 先下载谷歌浏览器 然后在应用里搜索安装即可
- Xcode插件优缺点对比(推荐20款插件)
本文大致整理了自己用过的一些插件的使用感想(就是好不好用). 在那之前先简单贴两条插件须知,知道的可以忽略. 1.Alcatraz 类似于管理第三方库的cocoapods,管理插件也有个Alcatra ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- 【转】Xcode 插件优缺点对比(推荐 20 款插件)
[转自]http://www.cnblogs.com/dsxniubility/p/5099191.html 1.Alcatraz 类似于管理第三方库的cocoapods,管理插件也有个Alcatra ...
- Xcode 插件优缺点对比(推荐 20 款插件)
链接地址:http://mp.weixin.qq.com/s?__biz=MjM5OTM0MzIwMQ==&mid=402439598&idx=1&sn=e8800cb0aa2 ...
- multiSelect 下拉多选插件
multiSelect是一款很好用的下拉多选插件,可以在下拉框中实现多选框,全选及取消全选等方法.使用方法:1.引用 multiSelect.css及 multiSelect.js.下载地址 http ...
- 11款插件让你的Chrome成为全世界最好用的浏览器|Chrome插件推荐
文章来源:知乎 收录于:风云社区(SCOEE)[提供mac软件下载] 更多专题,可关注小编[磨人的小妖精],查看我的文章,也可上[风云社区 SCOEE],查找和下载相关软件资源. (一)综合类: 新买 ...
- Xcode 插件优缺点对照(推荐 20 款插件)
Xcode 插件优缺点对照(推荐 20 款插件) 2016-01-22 06:16 编辑: lansekuangtu 分类:iOS开发 来源:董铂然 的博客 28 13527 /XCode/" ...
- 基于jQuery select下拉框美化插件
分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 源码下 ...
随机推荐
- 通过http将yum仓库发布
说明:这里是Linux服务综合搭建文章的一部分,本文可以作为单独构建http和发布yum仓库到内网的参考. 注意:这里所有的标题都是根据主要的文章(Linux基础服务搭建综合)的顺序来做的. 如果需要 ...
- 剖根问底:Java 不能实现真正泛型的原因是什么?
大家好,我是二哥呀! 今天我来给大家讲一下,Java 不能实现真正泛型的原因是什么? 本文已同步至 GitHub <教妹学 Java>专栏,风趣幽默,通俗易懂,对 Java 初学者亲切友善 ...
- 面试问题记录 二 (数据库、Linux、Redis)
面试问题记录 二 (数据库.Linux.Redis) 前言 接着上次的面试问题记录,在最后还有几道问的数据结构方面的知识点要补充 还是那句话:如果文中解释有明显错误,劳烦请及时指正我,在这不胜感激!! ...
- 深入刨析tomcat 之---第21篇 tomcat 对jsp页面支持的实现原理
writedby 张艳涛 web技术,以前的动态网页技术多是jsp页面,比如点击一个菜单目录,直接访问了一个LRJSDetailInput.jsp页面,这个页面 有<html><bo ...
- salesforce Integration 概览(一) 杂篇
本篇参考:https://resources.docs.salesforce.com/sfdc/pdf/integration_patterns_and_practices.pdf 我们在做sales ...
- ASP.NET使用递归算法实现画树程序
实现效果如下:(随机生成) using System; using System.Collections.Generic; using System.ComponentModel; using Sys ...
- mysql 占用90%多的CPU,解决思路
网站打开很慢,爆出了连接数据库的错误,进入服务器,top 看了下,mysql占用cpu 基本维持在90以上: mysql> show variables like '%slow%'; ...
- SAS 按自定义顺序对观测进行排序
本文链接:https://www.cnblogs.com/snoopy1866/p/15091967.html 实际项目中会经常遇到按指定顺序输出Listing的情况,例如:输出所有受试者的分组情况列 ...
- vue的项目初始化
1.创建文件 blog 2.下载安装node mongoose 3.(1)vue创建后端项目文件 vue create admin (2)vue创建前端项目文件 vue create web (3)新 ...
- Maven 手动安装JAR包到本地maven仓库后,但在项目中依旧报错找不到JAR包解决方法
本博客包含的内容: ①手动安装jar包到本地仓库: ②解决Missing artifact org.source.fastdfs:fastdfs:jar问题 .personSunflowerP { b ...