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))
    }
  }
})
相关推荐
_丿丨丨_4 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
软件2058 小时前
【vue3主题切换】
vue
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
hbrown9 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui