vite插件入门

1.自动导入API插件

引入依赖：

npm i unplugin-auto-import -D

在vite.config.ts文件中添加配置

plugins: [
  AutoImport({
    imports:["vue","vue-router"],
    dts:'src/auto-import.d.ts',    // 路径下自动生成文件夹存放全局指令
    dirs: 'src/**'  
  })
],

配置详解:

1. dirs： 目录下模块导出的自动导入。默认情况下，它只扫描目录下的一级模块，我们可以添加一些通配符来做筛选,限定到指定目录，或者到src 都可以做到自动引入，但是为了精确化查找，建议匹配越精准越好

   // 配置本地目录 自动引入
   dirs: ['./src/utils/**', './src/stores/**'],
   

2. dts： 生成相应.d.ts文件的文件路径。在本地安装typescript时自动导入.d.ts。

3. imports: 需要全局引入的

和eslintrc产生冲突，解决方法如下

加入eslint相关配置

import AutoImport from 'unplugin-auto-import/vite';

plugins: [
  AutoImport({
    imports:["vue","vue-router"],
    dts:'src/auto-import.d.ts',    // 路径下自动生成文件夹存放全局指令
    dirs: 'src/**',
    eslintrc: {
      enabled: true,  // 1、改为true用于生成配置文件eslintrc-auto-import.json。2、生成后改回false，避免重复生成消耗
    }
  })
],

.eslintrc-auto-import.json配置文件

"extends": [
    "./.eslintrc-auto-import.json"
]

tsconfig.json文件中添加如下配置

"include": ["./types/auto-imports.d.ts"],

2.自动导入组件插件

引入依赖

npm i -D unplugin-vue-components

配置

import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      // vue-components 内置了前端主流的resolve element antd
      resolvers: [ElementPlusResolver()],
      dirs: ['src/components'],
      // 组件名称 包含目录 ，防止命名冲突
      directoryAsNamespace: true,
    })
  ],
})

3.检查自动引入插件

引入依赖：

npm i -D vite-plugin-inspect

配置

import Inspect from 'vite-plugin-inspect'

export default {
  plugins: [
    Inspect()
  ],
}

启动后访问localhost:5173/__inspect/

4.unplugin-vue-setup-extend-plus插件

插件的功能

这个插件是用来解决vue3 setup 语法糖中无法给组件命名的缺陷的，不用插件的情况我们一般是这样写

<script lang="ts">
    export default {
      name: "Demo",
    };
</script>

<script setup lang="ts">
    import { ref } from "vue";

    for (let i = 0; i < 10; i++) {
      console.log(i);
    }
</script>

我们必须新加一个<script>标签来定义name，不怎么优雅，有了这个插件之后，就可以像这样写

<script setup name='Demo'>
    import { ref } from "vue";

    for (let i = 0; i < 10; i++) {
      console.log(i);
    }
</script>

引入插件依赖

npm i unplugin-vue-setup-extend-plus -D

配置插件

vite.config.js中配置

export default defineConfig((mode) => {
  return {
    plugins: [
      vueSetupExtend({enableAutoExpose: true})
    ],
  }
}

vueSetupExtend的配置项

vueSetupExtend({
  // Advanced mode for name, not necessary
  mode?: 'none' | 'relativeName' | Function
  // none: Cancel the setting of name.
  //       e.g.
  //       <script setup name="CustomName"> 'CustomName' 
  // support auto expose
  enableAutoExpose?: boolean
})

参考unplugin-vue-setup-extend-plus - npm

控制台警告

使用这个插件控制台会报警告：

[Vue warn]: Property "onVnodeBeforeMountRef_" was accessed during render but is not defined on instance. 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

vue组件：

<script setup>
</script>

<template>
  <div>
    <div ref="firstDiv">hello world</div>
  </div>
</template>

当在组件模板中使用ref的时候就会报警告。