在线预览

Link：https://wocwin.github.io/wocwin-admin/

一、@vitejs/plugin-vue-jsx

vite+vue3项目全面支持jsx语法

npm i @vitejs/plugin-vue-jsx -D

在vite.config.ts配置

import vueJsx from '@vitejs/plugin-vue-jsx'
plugins: [vueJsx()]

二、vite-plugin-vue-setup-extend

此插件解决了：使用setup语法糖的时候没办法直接为组件定义name（页面缓存需要name属性）

npm i vite-plugin-vue-setup-extend -D

在vite.config.ts配置

import vueSetupExtend from 'vite-plugin-vue-setup-extend'
plugins: [vueSetupExtend ()]

在页面使用

<script lang="ts" setup name="自定义name"></script>

三、unplugin-auto-import

让API自动导入;无需import { ref} from 'vue’这样引入了

npm i unplugin-auto-import -D

在vite.config.ts配置

import AutoImport from 'unplugin-auto-import/vite'
plugins: [AutoImport({imports: ['vue', 'vue-router','pinia'], // 自动导入vue、vue-router、pinia相关APIdts: 'src/auto-import.d.ts' // 生成 `auto-import.d.ts` 全局声明}),]

在页面使用

<script lang="ts" setup name="自定义name属性">
// onmounted属于vue的 API不需要单独引入了
// import { onMounted } from 'vue'
onMounted(() => {console.log('===')
})
</script>

四、vite-plugin-compression

静态资源压缩

npm i vite-plugin-compression -D

在vite.config.ts配置

import viteCompression from 'vite-plugin-compression'
plugins: [viteCompression({verbose: true,disable: false, // 不禁用压缩deleteOriginFile: false, // 压缩后是否删除原文件threshold: 10240, // 压缩前最小文件大小algorithm: 'gzip', // 压缩算法ext: '.gz' // 文件类型})]

五、rollup-plugin-visualizer

打包后的视图文件——生成一个stats.html文件

npm i rollup-plugin-visualizer -D

在vite.config.ts配置

import {visualizer} from 'rollup-plugin-visualizer'
plugins: [visualizer({open:true,  //注意这里要设置为true，否则无效gzipSize:true,brotliSize:true}),]

打包后会生成一个stats.html文件

组件地址

gitHub组件地址

gitee码云组件地址

基于ElementUi再次封装基础组件文档

vue3+ts基于Element-plus再次封装基础组件文档

vite+vue3+ts项目插件使用（提高开发效率vite+vue3插件使用）新增在线预览地址相关推荐

vue项目Agora声网实现一对一视频聊天Demo示例（Agora声网实战及agora-rtc-vue使用,新增在线预览地址）
最终效果在线预览地址一.声网简介---->请查看官网二.声网注册---->请自行百度(创建音视频连接需要在Agora注册属于您的appid) 三.具体实现视频聊天步骤 1. 实现音视 ...
IntelliJ Idea 常用10款插件（提高开发效率）
转自:https://blog.csdn.net/weixin_41846320/article/details/82697818 Intellij IDEA 中一些很牛B 的插件:https://b ...
10个提高开发效率的Vue3常用插件（快来收藏）
本篇文章给大家总结分享几个好用的 Vue 插件,可以帮助开发者提高开发效率.解决移动端各种滚动场景需求,希望对大家有所帮助! 1.vue-multiselect-next Vue.js 的通用选择/多 ...
IntelliJ Idea 常用12款插件（提高开发效率），附优秀主题插件
目录一.插件安装方式二.常用插件 1.Background Image Plus 2.Mybatis Log Plugin 3.MybatisCodeHelperPro 4.Grep Consol ...
可以提高开发效率的vscode插件
1,koroFileHeader 我们在新建一个文件后,常常需要在文件头部加入默认注释,vscode中提供了一个的插件,可以帮助我们实现. 1.1,安装插件在vscode extensions中搜 ...
很实用的idea插件，提高开发效率！！
1.Free MyBatis Plugin MyBatis扩展插件,可以在Mapper接口的方法和xml实现之间自由跳转,也可以用来一键生成某些xml实现. 2.MyBatis Log Plugin ...
vite创建ts项目定义变量无法类型检测
最初我在公司使用vite创建ts项目,我以为是我缺少什么插件但是我volar都安装,也把vuter也禁止了还是没用.(执行命令 npm init vite@latest) 然后我回家又自己笔记本试了 ...
vscode自动补全插件c语言,一些提高开发效率的VSCode必备插件（分享）,vscode代码补全插件...
一些提高开发效率的VSCode必备插件(分享)提高开发效率的虚拟代码的一些重要插件(分享),本文推荐一些VSCode插件来提高效率.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有帮助.Vis ...
史上最牛逼的 Eclipse 快捷键，提高开发效率！
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...

vite+vue3+ts项目插件使用（提高开发效率vite+vue3插件使用）新增在线预览地址

在线预览

一、@vitejs/plugin-vue-jsx

在vite.config.ts配置

二、vite-plugin-vue-setup-extend

在vite.config.ts配置

在页面使用

三、unplugin-auto-import

在vite.config.ts配置

在页面使用

四、vite-plugin-compression

在vite.config.ts配置

五、rollup-plugin-visualizer

在vite.config.ts配置

打包后会生成一个stats.html文件

组件地址

相关文章

vite+vue3+ts项目插件使用（提高开发效率vite+vue3插件使用）新增在线预览地址相关推荐

最新文章

热门文章