Vite 常用插件配置:自动导入+自动注册组件+动态创建图标+设置组件名
创建 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 / YesScaffolding 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))}}
})
相关文章:
Vite 常用插件配置:自动导入+自动注册组件+动态创建图标+设置组件名
创建 Vue3Vite 项目 创建 Vue3 项目 $ pnpm create vuelatest通过脚手架选择开启以下功能 ✔ Project name: … <your-project-name> ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development?…...
(leetcode学习)236. 二叉树的最近公共祖先
给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为:“对于有根树 T 的两个节点 p、q,最近公共祖先表示为一个节点 x,满足 x 是 p、q 的祖先且 x 的深度尽可能大(一个节点也可以是它自己的祖…...
Zabbix监控系统:zabbix服务部署+基于Proxy分布式部署+zabbix主动与被动监控模式
一、Zabbix概述 1.1 简介 zabbix 是一个基于 Web 界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案。 zabbix 能监视各种网络参数,保证服务器系统的安全运营,提供灵活的通知机制以让系统管理员快速定位/解决存在的各种问题。 zabbix…...
【Vue实战教程】之 Vue Router 路由详解
Vue Router路由 1 路由基础 1.1 什么是路由 用Vue.js创建的项目是单页面应用,如果想要在项目中模拟出来类似于页面跳转的效果,就要使用路由。其实,我们不能只从字面的意思来理解路由,从字面上来看,很容易把路由联想…...
测试用例接口开发实战
测试用例接口开发实战 前言 在上一集,我们也大概完成了对Jmeter的二次开发的Demo版本的了解,我们接下来就要基于这个Demo来将Jmeter压测进行平台化。 那么这一集,我们讲一讲测试用例接口开发实战。 StressCaseController 我们的Controll…...
C#中压缩文件夹,及其内容
压缩包格式,本文主要用于说明如何使用代码 文件或文件夹压缩为 zip压缩包及其解压操作, 下面分两个版本进行实现 1.简单版本 bool DoCompressDirectoryInfo(string folderPath){try{var zipFilePath $"{folderPath}.zip";var directoryInfo …...
机器学习 | 回归算法原理——多项式回归
Hi,大家好,我是半亩花海。接着上次的最速下降法(梯度下降法)继续更新《白话机器学习的数学》这本书的学习笔记,在此分享多项式回归这一回归算法原理。本章的回归算法原理基于《基于广告费预测点击量》项目,…...
力扣224【基本计算器】
给你一个字符串表达式 s ,请你实现一个基本计算器来计算并返回它的值。 注意:不允许使用任何将字符串作为数学表达式计算的内置函数,比如 eval() 。 1 < s.length < 3 * 105 s 由数字、‘’、‘-’、‘(’、‘)’、和 ’ ’ 组成 s 表示一个有效的…...
【Linux】HTTP 协议
目录 1. URL2. HTTP 协议2.1. HTTP 请求2.2. HTTP 响应 1. URL URL 表示着是统一资源定位符(Uniform Resource Locator), 就是 web 地址,俗称“网址”; 每个有效的 URL 可以通过互联网访问唯一的资源, 是互联网上标准资源的地址; URL 的主要由四个部分组成: sche…...
@Builder注释导致@RequestBody的前端json反序列化失败,HTTP400
项目里发生了一个bug,就是前端请求一个接口时候,报了HTTP 400 Bad Request 通常来说这个问题是前后端的参数没对齐,比如前端传了个String,但后端对应的是Integer。 所以我就排查了半天,结果没发现啥错误,…...
网络学习|如何理解服务的端口号
文章目录 1. 端口号的定义2. 端口号的分类3. 端口号的用途4. 注意事项5. 示例图解 后端面试中可能遇到的端口相关问题及答案1. 什么是端口号?为什么需要端口号?2. 知名端口(Well-Known Ports)有哪些,举例说明ÿ…...
《0基础》学习Python——第十八讲__爬虫/<1>
一、什么是爬虫 爬虫是一种网络数据抓取的技术。通过编写程序(通常使用Python),爬虫可以自动化地访问网页,解析网页内容并提取出所需的数据。爬虫可以用于各种用途,如搜索引擎的索引,数据分析和挖掘&#x…...
NFTScan 浏览器现已支持 .mint 域名搜索功能!
近日,NFT 数据基础设施 NFTScan 浏览器现已支持用户输入 .mint 域名进行 Mint Blockchain 网络钱包地址的搜索查询, NFTScan 用户能够轻松地使用域名追踪 NFT 交易,为 NFT 钱包地址相关的搜索查询功能增加透明度和便利性。 NFTScan explorer…...
Git基本原理讲解、常见命令、Git版本回退、Git抛弃本地分支拉取仓库最新分支
借此机会写篇博客汇总一下自己去公司实习之后遇到的一些常见关于Git的操作。 Git基本认识 Git把数据看作是对小型文件系统的一组快照,每次提交更新,或在Git中保存项目状态时,Git主要对当时的全部文件制作一个快照并保存这个快照的索引。同时…...
前端网页打开PC端本地的应用程序实现方案
最近开发有一个需求,网页端有个入口需要跳转三维大屏,而这个大屏是一个exe应用程序。产品需要点击这个入口,并打开这个应用程序。这个就类似于百度网盘网页跳转到PC端应用程序中。 这里我们采用添加自定义协议的方式打开该应用程序。一开始可…...
遇到not allow unquoted fieldName怎么办
前言 Exception in thread "main" com.alibaba.fastjson2.JSONException: not allow unquoted fieldName, offset 2, character , line 1, column 3, fastjson-version 2.0.25 { "data":null, "code":200, "msg":"成功"…...
IDEA安装并使用通义灵码
IDEA安装并使用通义灵码 通义灵码介绍安装通义灵码 通义灵码介绍 在数字革命的前沿,阿里云技术团队匠心独运,倾力打造“通义灵码”——一个融合尖端科技的智能编码助手,旨在革新软件工程的未来。 实时代码扩展 通义灵码具备深度理解代码脉络的…...
<数据集>AffectNet表情识别数据集<目标检测>
数据集格式:VOCYOLO格式 图片数量:29752张 标注数量(xml文件个数):29752 标注数量(txt文件个数):29752 标注类别数:7 标注类别名称:[anger,contempt,disgust,fear,happy,neutral,sad,surprise] 序号类…...
ThinkPHP对接易联云打印
引入composer包 composer require yly-openapi/yly-openapi-sdk <?phpnamespace app\common\library;use app\admin\model\yp\Order; use App\Api\PrintService; use App\Config\YlyConfig; use App\Oauth\YlyOauthClient; use think\Cache; use think\Config;class Yly {…...
JavaScript轮播图
HTML部分 <div class"box" onmouseover"over()" onmouseout"noover()"><img src"./img/zuo.png" alt"" class"left_arrow" onclick"left_last()"><img src"./img/yy.png" al…...
云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?
大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...
7.4.分块查找
一.分块查找的算法思想: 1.实例: 以上述图片的顺序表为例, 该顺序表的数据元素从整体来看是乱序的,但如果把这些数据元素分成一块一块的小区间, 第一个区间[0,1]索引上的数据元素都是小于等于10的, 第二…...
【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点,但无自动故障转移能力,Master宕机后需人工切换,期间消息可能无法读取。Slave仅存储数据,无法主动升级为Master响应请求ÿ…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
使用LangGraph和LangSmith构建多智能体人工智能系统
现在,通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战,比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...
RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill
视觉语言模型(Vision-Language Models, VLMs),为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展,机器人仍难以胜任复杂的长时程任务(如家具装配),主要受限于人…...
逻辑回归暴力训练预测金融欺诈
简述 「使用逻辑回归暴力预测金融欺诈,并不断增加特征维度持续测试」的做法,体现了一种逐步建模与迭代验证的实验思路,在金融欺诈检测中非常有价值,本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...
土建施工员考试:建筑施工技术重点知识有哪些?
《管理实务》是土建施工员考试中侧重实操应用与管理能力的科目,核心考查施工组织、质量安全、进度成本等现场管理要点。以下是结合考试大纲与高频考点整理的重点内容,附学习方向和应试技巧: 一、施工组织与进度管理 核心目标: 规…...
用 Rust 重写 Linux 内核模块实战:迈向安全内核的新篇章
用 Rust 重写 Linux 内核模块实战:迈向安全内核的新篇章 摘要: 操作系统内核的安全性、稳定性至关重要。传统 Linux 内核模块开发长期依赖于 C 语言,受限于 C 语言本身的内存安全和并发安全问题,开发复杂模块极易引入难以…...
2025.6.9总结(利与弊)
凡事都有两面性。在大厂上班也不例外。今天找开发定位问题,从一个接口人不断溯源到另一个 接口人。有时候,不知道是谁的责任填。将工作内容分的很细,每个人负责其中的一小块。我清楚的意识到,自己就是个可以随时替换的螺丝钉&…...
