vue3中超好用的插件整理

更新時(shí)間：2023年02月10日 08:54:47 作者：icey-TANG

最近找到幾個(gè)好用的插件,這里分享一下,下面這篇文章主要給大家介紹了關(guān)于vue3中超好用的插件整理,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1.Api 自動(dòng)導(dǎo)入

unplugin-auto-import自動(dòng)引入 composition api，不需要再手動(dòng)引入。（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
      ],
      // 自動(dòng)引入哪些包
      imports: [
        // 自動(dòng)引入整個(gè)模塊
        "vue",
        "vue-router",
        //  自定義模塊引入，比如只需要自動(dòng)引入某個(gè)東西，給引入的模塊起別名
        {
          "@vueuse/core": [
            // 按需導(dǎo)出的模塊
            "useMouse", // import { useMouse } from '@vueuse/core',
            // 導(dǎo)出別名
            ["useFetch", "useMyFetch"], // import { useFetch as useMyFetch } from '@vueuse/core',
          ],
          axios: [
            //  默認(rèn)導(dǎo)出
            ["default", "axios"], // import { default as axios } from 'axios',
          ],
        },
      ],
      // 聲明文件
      dts: "./auto-imports.d.ts",
      resolvers: [
        /* ... */
      ],
        // 生成相應(yīng)的.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 時(shí)自動(dòng)生成的，可以去看看文件內(nèi)容，里面會(huì)標(biāo)明自動(dòng)引入了哪些東西

2.setup name 增強(qiáng) vite-plugin-vue-setup-extend

在使用 Vue3.2 的 setup 語(yǔ)法糖后，無(wú)法優(yōu)雅的定義組件的 name 值，雖然 vite 會(huì)根據(jù)組件的文件名自動(dòng)生成組件名，但是需要自定義的組件名時(shí)，就很不方便。

解決這個(gè)問(wèn)題通常是通過(guò)寫(xiě)兩個(gè) script 標(biāo)簽來(lái)解決，一個(gè)使用 setup，一個(gè)不使用，但這樣必然是不夠優(yōu)雅的。

安裝vite-plugin-vue-setup-extend插件可以優(yōu)雅的解決這個(gè)問(wèn)題

安裝

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 及以前版本時(shí)，會(huì)有個(gè)問(wèn)題：如果 script 標(biāo)簽內(nèi)沒(méi)有內(nèi)容，即使給 script 標(biāo)簽添加上 name 屬性，其在 vue-devtools 內(nèi)也不會(huì)生效。
解決：不要讓 script 標(biāo)簽內(nèi)空著，例如：加行注釋。

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

3.自動(dòng)導(dǎo)入圖片

爽歸爽，但容易發(fā)生變量沖突，慎用！

自動(dòng)導(dǎo)入圖像，同級(jí)目錄的文件名不能重復(fù)！（官網(wǎng)地址）

安裝

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"], // 圖像目錄的相對(duì)路徑
      extensions: ["jpg", "jpeg", "png", "svg", "webp"], // 有效的圖像擴(kuò)展
      customResolvers: [], // 覆蓋名稱->圖像路徑解析的默認(rèn)行為
      customSearchRegex: "([a-zA-Z0-9]+)", // 重寫(xiě)搜索要替換的變量的Regex。
    }),
  ],
};

使用

<template>
  <img :src="Image1" />
</template>

<script setup lang="ts"></script>

插件將轉(zhuǎn)換為：

<template>
  <img :src="Image1" />
</template>

<script setup lang="ts">
import Image1 from "@/assets/Image1.png";
</script>

4.組件自動(dòng)按需導(dǎo)入

unplugin-vue-components

安裝

npm i unplugin-vue-components -D

配置 vite.config.ts

import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite' // 按需加載自定義組件
// ui庫(kù)解析器，也可以自定義，需要安裝相關(guān)UI庫(kù)，unplugin-vue-components/resolvers
// 提供了以下集中解析器，使用的時(shí)候，需要安裝對(duì)應(yīng)的UI庫(kù)，這里以AntDesign示例
// 注釋的是包含的其他一些常用組件庫(kù)，供參考
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庫(kù)解析器，也可以自定義，需要安裝相關(guān)UI庫(kù)
      resolvers: [
        //  VantResolver(),
        // ElementPlusResolver(),
        // AntDesignVueResolver(),
        // HeadlessUiResolver(),
        // ElementUiResolver()
        AntDesignVueResolver({
          // 參數(shù)配置可參考：https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/antdv.ts
          // 自動(dòng)引入 ant-design/icons-vue中的圖標(biāo)，需要安裝@ant-design/icons-vue
          resolveIcons: true,
        }),
      ],
    }),
  ],
})