vue3中超好用的插件整理

目录
  • 1.Api 自动导入
  • 2.setup name 增强 vite-plugin-vue-setup-extend
  • 3.自动导入图片
  • 4.组件自动按需导入
  • 总结

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="Image1" />
</template>

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

插件将转换为:

<template>
  <img :src="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,
        }),
      ],
    }),
  ],
})

总结

到此这篇关于vue3中超好用的插件整理的文章就介绍到这了,更多相关vue3插件整理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue3 中的插件和配置推荐大全

    目录 1. Vite 2. 自动导入常见方法 2.1 传统写法 2.2 自动导入 3. 组件去后缀 4. name 属性问题 小伙伴们知道 TienChin 项目前端用的是 Vue3,当我们把 Vue3 官网刷了一遍之后回来看 TienChin 项目的前端,发现还是有很多不太一样的地方,今天松哥就来和大家捋一捋 Vue3 中几个好玩的插件和配置,学完之后,相信大家对 TienChin 项目前端的很多写法就明白了. 1. Vite 首先来给大家介绍一下 Vite,虽然这在 Vue3 中并不是必须的

  • Vue3开发必备的六个VSCode插件推荐

    目录 1. Volar 2. Vue VSCode Snippets 3. Auto Close Tag 4. Vue Peek 5. Vue Theme 6. Vite 总结 今天分享 6 个 Vue3 开发必备的 VSCode 插件,可以直接用过 VSCode 的插件中心直接安装使用. 1. Volar 下载数 153 万+ 相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生,作为 Vue2 配套的 VSCode 插件,它的主要作用是对 Vue 单文件组件提供高亮

  • vue3中超好用的插件整理

    目录 1.Api 自动导入 2.setup name 增强 vite-plugin-vue-setup-extend 3.自动导入图片 4.组件自动按需导入 总结 1.Api 自动导入 unplugin-auto-import自动引入 composition api,不需要再手动引入.(npm 地址) 下载 npm i -D unplugin-auto-import 配置 vite.config.ts import AutoImport from "unplugin-auto-import/vi

  • Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)

    本文给大家介绍如何判断表单验证的实例代码,在没给大家介绍正文之前,先给大家介绍下插件. 插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用提示 中文化: 下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化 提交前验证表单: 更丰富一点的表单验证例子:http://www.jq22.com/yanshi522,直接上代码: <!DOCTYPE h

  • Vue3 中自定义插件的实现方法

    目录 1. Vue 插件 2. 自定义插件 2.1 基本用法 2.2 加入组件 2.3 加入指令 2.4 provide & inject 3. 小结 最近在录 TienChin 项目,项目涉及到了 Vue 中插件的定义,因此整了这么一篇文章,手把手教大家在 Vue3 中定义插件,这个技能掌握了,就可以看懂 TienChin 前端代码了. 1. Vue 插件 在 Vue 中,一些简单的功能,我们可以直接定义为全局方法,然后挂到 Vue 上就能使用了,例如在 vhr 中,我们将网络请求方法进行封装

  • vue3中setup语法糖下通用的分页插件实例详解

    目录 vue3中setup语法糖下父子组件之间的通信 准备工作 父传子: 子传父: 先给大家介绍下vue3中setup语法糖下通用的分页插件,内容如下所示: 效果 自定义分页插件:PagePlugin.vue <script setup lang="ts"> // total :用来传递数据总条数 // pageSize :每页展示几条数据 // currentPage :当前默认页码 // change-page :页码改变时触发的事件,参数为当前页码 const pro

  • 如何在Vue3中实现自定义指令(超详细!)

    目录 前言 生命周期 钩子的参数 简化形式 对象字面量 在组件上使用指令 几个实用的自定义指令 自动聚焦v-focus 防抖v-debounce 节流v-throttle 弹窗隐藏v-hide 总结 在开发Vue项目时,大多数人都会使用到Vue内置的一些指令,例如v-model.v-if等,在使用的时候不知道有没有想过自己也来实现一个指令呢.本文就以Vue3项目为基础,从原理.方法到实际案例.注意事项,尽可能细致的讲解如何自定义指令. 前言 我们需要明白为什么需要自定义一个指令,其实就是想更加简

  • vue3中vuex与pinia的踩坑笔记记录

    目录 介绍 安装使用 简单对比写法差异与共同点 Vuex 和 Pinia 的优缺点 何时使用Pinia,何时使用Vuex 总结 介绍 Pinia 是 Vue.js 的轻量级状态管理库,最近很受欢迎.它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库. Pinia的成功可以归功于其管理存储数据的独特功能(可扩展性.存储模块组织.状态变化分组.多存储创建等). 另一方面,Vuex也是为Vue框架建立的一个流行的状态管理库,它也是Vue核心团队推荐的状态管理库.Vuex高度关注应

  • 详解在vue3中使用jsx的配置以及一些小问题

    目录 配置 模版语法 v-if/v-show 配置 在vue3中使用jsx十分方便,只需要安装官方的@vitejs/plugin-vue-jsx插件,在vite.config.ts中配置 // vite.config.ts import vueJsx from "@vitejs/plugin-vue-jsx"; export default { plugins: [vueJsx()] } 配置了vite.config.ts后虽然已经可以使用jsx,页面也正常渲染了,但是还是会提示无法使

  • vue3中element-plus icon图标的正确使用姿势

    目录 前言: 改变: 错误使用: 正确使用: setup script扩展 更新 总结 前言: 为了适应vue3的更新,element组件也将其内容升级为了plus用以配套的使用,很多组件新增了更加多元的功能,但我用的时候就觉得那个icon图标,怎么变得特别难用呢?原来是没有掌握正确的使用方法 改变: // 原来 <i class="el-icon-edit"></i> // plus <el-icon :size="size" :co

  • 深入了解Vue3中侦听器watcher的实现原理

    目录 watch API 的用法 watch API实现原理 标准化source 构造回调函数 创建scheduler 创建effect 返回销毁函数 异步任务队列的设计 异步任务队列的创建 异步任务队列的执行 检测循环更新 优化:只用一个变量 watchEffect 注册无效回调函数 总结 在平时的开发工作中,我们经常使用侦听器帮助我们去观察某个数据的变化然后去执行一段逻辑. 在 Vue.js 2.x 中,你可以通过 watch 选项去初始化一个侦听器,称作 watcher: export d

随机推荐