Vite 常用插件配置：自动导入+自动注册组件+动态创建图标+设置组件名

九月儿

于 2024-07-25 15:37:42 发布

阅读量59

点赞数

分类专栏： Vite 文章标签： vue 前端

本文链接：https://blog.csdn.net/qq_20765533/article/details/140689233

版权

Vite 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

创建 Vue3+Vite 项目

创建 Vue3 项目

$ pnpm create vue@latest

通过脚手架选择开启以下功能

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

进入并启动项目

cd <your-project-name>
pnpm install
pnpm run dev

配置自动引入

作用：script 中使用配置过的内容不需要明文引入。

安装相关包

pnpm install element-plus @vueuse/core
pnpm install unplugin-auto-import -D

配置自动引入

import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
AutoImport({
  resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
  imports: [
    'vue',
    'vue-router',
    '@vueuse/core',
    {
      from: 'element-plus',
      imports: ['ElMessage', 'ElMessageBox']
    }
  ],
  dirs: [
    './src/components/*/index.vue',
    './src/enums/*.ts',
    './src/utils/*.ts',
    './src/composables'
  ]
}),

配置自动注册组件

作用：页面中使用到的相关包中组件，在 script 中不需要明文引入。

安装相关包

pnpm install unplugin-vue-components -D

配置自动注册组件

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
Components({
  resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
}),

配置动态生成图标

作用：页面中可以直接通过组件引用一个 *.svg 文件作为图标使用，设置字体颜色、字体大小等。

安装相关包

pnpm install unplugin-svg-component -D

配置动态生成图标

import UnpluginSvgComponent from 'unplugin-svg-component/vite'
UnpluginSvgComponent({
  iconDir: path.resolve(__dirname, './src/assets/icons'),
  projectType: 'vue',
  vueVersion: 3,
  prefix: 'icon',
  dtsDir: path.resolve(__dirname, './src/types/'),
  dts: true,
  scanStrategy: 'text',
  preserveColor: path.resolve(__dirname, './src/assets/icons/preserve')
}),

应用图标

// 取 src/assets/icons 目录下 viewer/edit.svg，不使用原 svg 颜色
<svg-icon name="icon-viewer-edit"></svg-icon>

// 取 src/assets/icons 目录下 preserve/home.svg，使用原 svg 颜色
<svg-icon name="icon-preserve-home"></svg-icon>

配置组件名

作用：当使用

安装相关包

pnpm install vite-plugin-vue-setup-extend -D

配置自动注册组件

import Components from 'vite-plugin-vue-setup-extend'
VueSetupExtend()

应用

<script setup name="Viewer"></script>

全部配置

import { defineConfig } from 'vite'
import path from 'path'
import { fileURLToPath, URL } from 'node:url'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'

import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import UnpluginSvgComponent from 'unplugin-svg-component/vite'

import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
      imports: [
        'vue',
        'vue-router',
        '@vueuse/core',
        {
          from: 'element-plus',
          imports: ['ElMessage', 'ElMessageBox']
        }
      ],
      dirs: [
        './src/components/*/index.vue',
        './src/enums/*.ts',
        './src/utils/*.ts',
        './src/composables'
      ]
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
    }),
    UnpluginSvgComponent({
      iconDir: path.resolve(__dirname, './src/assets/icons'),
      projectType: 'vue',
      vueVersion: 3,
      prefix: 'icon',
      dtsDir: path.resolve(__dirname, './src/types/'),
      dts: true,
      scanStrategy: 'text',
      preserveColor: path.resolve(__dirname, './src/assets/icons/preserve')
    }),
    vue(),
    vueJsx(),
    vueDevTools(),
    VueSetupExtend()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})