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))
    }
  }
})
相关推荐
小小小小宇7 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊7 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习8 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖8 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖8 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水9 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐9 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06279 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121389 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴9 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript