Vite一些快捷使用

Vite自动按需引入

1. unplugin-auto-import:

该插件主要作用省去是对框架本身及相关库的引入、api的引入。

例如Vite, Webpack, Rollup and esbuild。

2.unplugin-vue-components

该插件主要作用是省去每次使用一个自定义组件，或UI组件库的组件时对组件的引入。兼容不同UI组件库，需要在安装对应UI组件库的前提下，并引入对应UI组件库的 resolvers。

• 安装

npm install -D unplugin-vue-components 

npm install -D unplugin-auto-import

• 在vite中使用

// vite.config.js

// 实现 组件的按需加载
// 当引入 "unplugin-vue-components/vite 组件之后，页面中需要引入组件的地方就都不需要引入了
import Components from 'unplugin-vue-components/vite'

// 引入对应 UI库的 resolver，则对应UI组件库的组件也不需要单独引入了
// 注意 使用具体的UI库，还是要具体 安装 ，比如   npm install -D ElementPlusResolver
import { ElementPlusResolver} from 'unplugin-vue-components/resolvers'

// 实现 Vue及Vue相关的库、api的 按需加载
import AutoImport from "unplugin-auto-import/vite";

export default defineConfig {
  // ...
  plugins: [
    // 按需引入
    Components({
      // dirs 指定组件所在位置，默认为 src/components 
      // 可以让我们使用自己定义组件的时候免去 import 的麻烦
      dirs: ['src/components'], // 按需加载的文件夹
      // 配置需要将哪些后缀类型的文件进行自动按需引入，'vue'为默认值 
      extensions: ['vue'],
      // 解析组件，这里以 Element Plus 为例
      resolvers: [ElementPlusResolver()],
      // dts：true 或者为 'src/components.d.ts'时，则会自动生成components.d.ts
      dts: true,  
      // 遍历子目录 
      deep: true
    }),
    
    AutoImport({
       imports: ["vue", "vue-router", "pinia"],
    }),
  ],
  // ...
}

// demo 
<script setup>    // ref 也不需要引入

     const counter = ref(0);
     const inc = () => counter.value++;
</script>
<template>
      <div>{{ counter }}</div>
      <button @click="inc">counter+1</button>
    // 以下组件都可以直接引入 
    <Foo></Foo>
    <el-button>elmentplus button</el-button>
    <n-button>naiveui button</n-button>
</template>

Vite处理svg

vite-plugin-svg-icons 用于生成 svg 雪碧图.

• 预加载 在项目运行时就生成所有图标,只需操作一次 dom
• 高性能 内置缓存,仅当文件被修改时才会重新生成

1.安装

 npm i vite-plugin-svg-icons -D

2.配置

import viteSvgIcons from 'vite-plugin-svg-icons'
const pathResolve = (dir: string): any => {
    return resolve(__dirname, ".", dir);
};
 
export default () => {
  return {
    plugins: [
       createSvgIconsPlugin({
            // 指定需要缓存的svg图标文件夹，即需要识别的svg都应该放在这个文件夹下
            iconDirs: [pathResolve("./src/assets/svg")],
            // 指定symbolId格式（引入svg组件的name配置项写法有关）
            symbolId: "icon-[dir]-[name]",
        }),
         
       
    ],
  }
}

3.根据vite配置的svg图标文件夹，建好文件夹，把svg图标放入

4、在 src/main.js内引入注册脚本

import 'vite-plugin-svg-icons/register'

5.创建SvgIcon组件：

//  /src/components/SvgIcon.vue
<template>
    <svg aria-hidden="true" class="svg-icon">
        <use :xlink:href="symbolId" :fill="color" />
    </svg>
</template>

<script>
import { defineComponent, computed } from "vue";

export default defineComponent({
    name: "SvgIcon",
    props: {
        // 使用的svg图标名称，也就是svg文件名
        name: {
            type: String,
            required: true,
        },
        prefix: {
            type: String,
            default: "icon",
        },
        color: {
            type: String,
            default: "#333",
        },
    },
    setup(props) {
        const symbolId = computed(() => `#${props.prefix}-${props.name}`);
        return { symbolId };
    },
});
</script>
<style scope>
.svg-icon {
    width: 16px;
    height: 16px;
    color: #333;
    fill: currentColor;
}
</style>

6.全局注册组件：

// 这块vite全局自动按需引入的话，就可以不需要注册。
import svgIcon from './components/svgIcon/index.vue'
 app.component("svg-icon", svgIcon)

7.使用

<svg-icon name="test" class="any" />