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

创建 Vue3+Vite 项目

创建 Vue3 项目

bash 复制代码
$ pnpm create vue@latest

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

bash 复制代码
✔ 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.

进入并启动项目

bash 复制代码
cd <your-project-name>
pnpm install
pnpm run dev

配置自动引入

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

安装相关包

bash 复制代码
pnpm install element-plus @vueuse/core
pnpm install unplugin-auto-import -D

配置自动引入

javascript 复制代码
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 中不需要明文引入。

安装相关包

bash 复制代码
pnpm install unplugin-vue-components -D

配置自动注册组件

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

配置动态生成图标

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

安装相关包

bash 复制代码
pnpm install unplugin-svg-component -D

配置动态生成图标

javascript 复制代码
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')
}),

应用图标

html 复制代码
// 取 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>

配置组件名

作用:当使用

安装相关包

bash 复制代码
pnpm install vite-plugin-vue-setup-extend -D

配置自动注册组件

javascript 复制代码
import Components from 'vite-plugin-vue-setup-extend'
VueSetupExtend()

应用

javascript 复制代码
<script setup name="Viewer"></script>

全部配置

javascript 复制代码
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))
    }
  }
})
相关推荐
嘗_11 分钟前
暑期前端训练day5
前端
uncleTom66618 分钟前
前端布局利器:rem 适配全面解析
前端
谦哥21 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
LEAFF32 分钟前
如何 测试Labview是否返回数据 ?
前端
Spider_Man34 分钟前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
心在飞扬35 分钟前
理解JS事件环(Event Loop)
前端·javascript
盏茶作酒291 小时前
打造自己的组件库(一)宏函数解析
前端·vue.js
山有木兮木有枝_1 小时前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树1 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js
颜渊呐2 小时前
uniapp中APPwebview与网页的双向通信
前端·uni-app