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

在线预览

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

一、@vitejs/plugin-vue-jsx

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

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

在vite.config.ts配置

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

二、vite-plugin-vue-setup-extend

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

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

在vite.config.ts配置

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

在页面使用

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

</script>
1
2
3

三、unplugin-auto-import

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

npm i unplugin-auto-import -D
1

在vite.config.ts配置

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

在页面使用

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

四、vite-plugin-compression

静态资源压缩

npm i vite-plugin-compression -D
1

在vite.config.ts配置

import viteCompression from 'vite-plugin-compression'
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

五、rollup-plugin-visualizer

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

npm i rollup-plugin-visualizer -D
1

在vite.config.ts配置

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

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

组件地址

gitHub组件地址

gitee码云组件地址

相关文章

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

---

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