vue引入js插件（vue3 中好用的插件）

1.Api 自动导入

unplugin-auto-import自动引入 composition api 
  
  
  
  
  
  
  
 ，不需要再手动引入                。（npm 地址）

下载 npm i -D unplugin-auto-import 配置 vite.config.ts import AutoImport from "unplugin-auto-import/vite"; export default defineConfig({ plugins: [ vue(), AutoImport({ /* options */ imports: ["vue"], dts: "src/auto-import.d.ts", }), ], });

全部配置

AutoImport({ // 在哪些文件里可以直接引入 include: [ /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx /\.vue$/, /\.vue\?vue/, // .vue /\.md$/, // .md ], // 自动引入哪些包 imports: [ // 自动引入整个模块 "vue", "vue-router", // 自定义模块引入
  
  
  
  
  
  
  
  ，比如只需要自动引入某个东西
 


 


 


 


 


 


 


 

，给引入的模块起别名 { "@vueuse/core": [ // 按需导出的模块 "useMouse", // import { useMouse } from @vueuse/core, // 导出别名 ["useFetch", "useMyFetch"], // import { useFetch as useMyFetch } from @vueuse/core, ], axios: [ // 默认导出 ["default", "axios"], // import { default as axios } from axios, ], }, ], // 声明文件 dts: "./auto-imports.d.ts", resolvers: [ /* ... */ ], // 生成相应的.eslintrc-auto-import.json文件 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
。 // eslint globals文档 - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals eslintrc: { enabled: false, // Default `false` filepath: ./.eslintrc-auto-import.json, // Default `./.eslintrc-auto-import.json` globalsPropValue: true, // Default `true`, (true | false | readonly | readable | writable | writeable) }, }),

声明文件 auto-imports.d.js 时自动生成的 
 
 
 
 
 
 
 
，可以去看看文件内容
   
   
   
   
   
   
   
   ，里面会标明自动引入了哪些东西

2.setup name 增强 vite-plugin-vue-setup-extend

在使用 Vue3.2 的 setup 语法糖后
 

 

 

 

 

 

 

 
，无法优雅的定义组件的 name 值 

 

 

 

 

 

 

 

，虽然 vite 会根据组件的文件名自动生成组件名                ，但是需要自定义的组件名时

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，就很不方便















。

解决这个问题通常是通过写两个 script 标签来解决















，一个使用 setup                        ，一个不使用
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，但这样必然是不够优雅的 
  
  
  
  
  
  
  
 。

安装vite-plugin-vue-setup-extend插件可以优雅的解决这个问题

安装 npm i vite-plugin-vue-setup-extend -D 配置 vite.config.ts import { defineConfig } from "vite"; import VueSetupExtend from "vite-plugin-vue-setup-extend"; export default defineConfig({ plugins: [VueSetupExtend()], }); 使用 <script lang="ts" setup name="demo"></script>

在使用 vite-plugin-vue-setup-extend 0.4.0 及以前版本时























，会有个问题：如果 script 标签内没有内容                ，即使给 script 标签添加上 name 属性
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，其在 vue-devtools 内也不会生效 
  
  
  
  
  
  
  
 。

解决：不要让 script 标签内空着















，例如：加行注释

 


 


 


 


 


 


 


 
。 <script lang="ts" setup name="demo"> // test </script>

3.自动导入图片

爽归爽 
  
  
  
  
  
  
  
 ，但容易发生变量冲突
  
  
  
  
  
  
  
  ，慎用！

自动导入图像
 


 


 


 


 


 


 


 

，同级目录的文件名不能重复！（官网地址）

安装 npm i vite-plugin-vue-images -D 配置 vite.config.ts import { defineConfig } from "vite"; import ViteImages from "vite-plugin-vue-images"; export default { plugins: [ Vue(), ViteImages({ dirs: ["src/assets"], // 图像目录的相对路径 extensions: ["jpg", "jpeg", "png", "svg", "webp"], // 有效的图像扩展 customResolvers: [], // 覆盖名称->图像路径解析的默认行为 customSearchRegex: "([a-zA-Z0-9]+)", // 重写搜索要替换的变量的Regex 
 
 
 
 
 
 
 
。 }), ], }; 使用 <template> <img :src="https://www.cnblogs.com/icey-Tang/archive/2023/02/07/Image1" /> </template> <script setup lang="ts"></script>

插件将转换为：

<template> <img :src="https://www.cnblogs.com/icey-Tang/archive/2023/02/07/Image1" /> </template> <script setup lang="ts"> import Image1 from "@/assets/Image1.png"; </script>

4.组件自动按需导入

unplugin-vue-components

安装 npm i unplugin-vue-components -D 配置 vite.config.ts import { defineConfig } from vite import Components from unplugin-vue-components/vite // 按需加载自定义组件 // ui库解析器 
 
 
 
 
 
 
 
，也可以自定义
   
   
   
   
   
   
   
   ，需要安装相关UI库
 

 

 

 

 

 

 

 
，unplugin-vue-components/resolvers // 提供了以下集中解析器 

 

 

 

 

 

 

 

，使用的时候                ，需要安装对应的UI库

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，这里以AntDesign示例 // 注释的是包含的其他一些常用组件库















，供参考 import { // ElementPlusResolver, AntDesignVueResolver, // VantResolver, // HeadlessUiResolver, // ElementUiResolver } from unplugin-vue-components/resolvers export default defineConfig({ plugins: [ // 按需引入 Components({ dts: true, dirs: [src/components], // 按需加载的文件夹 extensions: [vue, jsx], // 文件类型 // ui库解析器                        ，也可以自定义
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，需要安装相关UI库 resolvers: [ // VantResolver(), // ElementPlusResolver(), // AntDesignVueResolver(), // HeadlessUiResolver(), // ElementUiResolver() AntDesignVueResolver({ // 参数配置可参考：https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/antdv.ts // 自动引入 ant-design/icons-vue中的图标























，需要安装@ant-design/icons-vue resolveIcons: true, }), ], }), ], })