vite工程化开发配置---持续更新

vite支持tsx开发

根据之前写的文章vue3+vite+ts+eslint+prettier+stylelint+husky+lint-staged+commitlint+commitizen+cz-git里面tsconfig配置了jsx相关选项,但是想要vite能够识别我们还需要配置一下
安装@vitejs/plugin-vue-jsx

pnpm i -D @vitejs/plugin-vue-jsx

vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";export default defineConfig({plugins: [vue(), vueJsx()],
});

别名配置

vite.config.ts配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import path from "node:path";export default defineConfig({plugins: [vue(), vueJsx()],resolve: {alias: {"@": path.resolve(__dirname, "src"),"@com": path.resolve(__dirname, "src/components"),},// 导入时想要省略的扩展名列表。注意,不 建议忽略自定义导入类型的扩展名(例如:.vue),因为它会影响 IDE 和类型支持。extensions: [".ts", ".js", ".json", ".tsx"],},
});

tsconfig.app.json配置

{"extends": "./tsconfig.base.json","compilerOptions": {"composite": true,"lib": ["ES2020", "DOM", "DOM.Iterable"],// vue中tsx的配置"jsx": "preserve","jsxImportSource": "vue",// 添加对应的paths配置"paths": {"@/*": ["src/*"],"@com/*": ["src/components/*"]}},"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "types/*.d.ts"],"exclude": ["node_modules/**", "dist/**", "**/*.js", "vite.config.ts"]
}

测试一下有没有问题
在这里插入图片描述

vue,element-ui等 api,组件按需导入

安装插件

pnpm i -D unplugin-auto-import unplugin-vue-components

我们还没有配置的时候项目的目录如下:
在这里插入图片描述
然后我们配置一下vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import path from "node:path";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";export default defineConfig({plugins: [vue(),vueJsx(),// 新增AutoImport({include: [/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx/\.vue$/,/\.vue\?vue/, // .vue/\.md$/, // .md],imports: [// 插件预设好包"vue","vue-router",],}),// 新增Components({}),],resolve: {alias: {"@": path.resolve(__dirname, "src"),"@com": path.resolve(__dirname, "src/components"),},// 导入时想要省略的扩展名列表。注意,不 建议忽略自定义导入类型的扩展名(例如:.vue),因为它会影响 IDE 和类型支持。extensions: [".ts", ".js", ".json", ".tsx"],},
});

这个时候插件会自动给我们生成两个文件一个是auto-imports.d.tscomponents.d.ts
在这里插入图片描述
这个时候我们才配置一下vite.config.ts里面的AutoImportComponents

AutoImport({include: [/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx/\.vue$/,/\.vue\?vue/, // .vue/\.md$/, // .md],imports: [// 插件预设好包"vue","vue-router",],eslintrc: {// 为true的时候,每次启动项目都会生成 auto-imports.d.ts 以及 .eslintrc-auto-import.json、// .eslintrc-auto-import.json这个我们需要在.eslintrc.cjs的extends里面去引入,否则会报错enabled: true,},dts: "./auto-imports.d.ts", // 插件给自动生成的声明文件,需要我们手动导入
}),
Components({dts: "./components.d.ts", // 插件给自动生成的声明文件,需要我们手动导入dirs: [], // 如果我们自己的业务组件,如`src/components`下面写的组件也想实习那自动按序导入的话,可以在这里面配置上路径
})

这个时候发现根目录下又多了一个文件.eslintrc-auto-import.json
在这里插入图片描述
所以我们也要修改一下.eslintrc.cjs
在这里插入图片描述
为了ts不报错,我们也需要配置一下tsconfig.app.json
在这里插入图片描述

然后我们安装element-plus

pnpm i element-plus

关于组件的按需导入官方文档上有介绍
在这里插入图片描述
我们照着配置好就行
这个时候我们可以在App.vue中测试一下
在这里插入图片描述
保存之后,我们可以看一下components.d.ts
在这里插入图片描述
ElButton组件就被动态引入了
在这里插入图片描述
也可以在文件中使用el-input,可以观察一下components.d.ts发现插件会自动帮我们把ElInput也给动态引入了

vite proxy代理配置

配置代理用于开发环境下解决接口跨域问题,要是后端人好给解决了跨域可以不配置
关于代理的配置可以看这篇文章vite配置之获取.env.[mode]下的数据
这个时候vite.config.ts配置如下
在这里插入图片描述

unocss配置

可以看这篇文章vite配置unocss

less 全局变量配置

css: {// 预处理器配置项preprocessorOptions: {less: {charset: false,// 注意 ";" 不要漏掉additionalData: '@import "./src/style/index.less";',},},},

vite build模式下去掉文件中的console,debugger

esbuild: {drop: command === 'serve' ? [('console', 'debugger')] : [],}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/42371.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Scapy库实现SYN洪水攻击的Python脚本

Scapy库实现SYN洪水攻击的Python脚本 代码用于学习熟悉Scapy库及其在网络安全研究和测试中提供的各种选项和功能 脚本旨在执行SYN洪水攻击,这是一种分布式拒绝服务(DDoS)攻击的类型。未经授权参与此类攻击通常是违法的,可能会产生严重后果 代码 SynFlood.py from scapy.all…

Google 搜索引擎:便捷高效、精准查询,带来无与伦比的搜索体验

Google搜索引擎不仅具备检索功能,实则是引领探索万千世界的神秘钥匙。试想,无论何时何地,只需轻触屏幕,所需信息即可唾手可得。便捷与高效,令人叹为观止。其界面设计简约直观,操控体验犹如与未来对话&#…

如何压缩pdf文件大小,怎么压缩pdf文件大小

在数字化时代,pdf文件因其稳定的格式和跨平台兼容性,成为了工作与学习中不可或缺的一部分。然而,随着pdf文件内容的丰富,pdf文件的体积也随之增大,给传输和存储带来了不少挑战。本文将深入探讨如何高效压缩pdf文件大小…

小米手机短信怎么恢复?不用求人,3个技巧一网打尽

当你突然发现安卓手机里的重要短信不见了,是不是感到一阵心慌意乱?别急,不用求人,更不用焦虑。作为基本的社交功能,短信是我们与外界沟通的重要桥梁,当删除后,短信怎么恢复呢?今天&a…

重生奇迹MU 有向导不迷路

欢迎来到重生奇迹MU冒险世界!为了让您更好地享受游戏乐趣,我们特别为您准备了一位贴心的导游,让您在游戏中不再迷路。跟随我们的导游,您将更快地了解游戏规则,更快地升级,更快地获得胜利!快来加…

【pytorch23】MNIST测试实战

理解 训练完之后也需要做测试 为什么要做test? 上图蓝色代表train的accuracy 下图蓝色代表train的loss 基本上符合预期,随着epoch增大,train的accuracy也会上升,loss也会一直下降,下降到一个较小的程度 但是如果只看…

Java:使用synchronized和Redis实现并发控制的区别

在线程同步中,synchronized和Redis虽然都可以用来实现并发控制,但它们的作用范围、机制以及性能特点存在显著差异。 1. 作用范围 synchronized: 是Java语言内置的关键字,用于实现线程间的同步。它作用于对象或代码块,可以确保同一…

你手上有offer吗?

作者:猿java。 ​顺便吆喝一声,如果你计算机、软件工程、电子等相关专业本科及以上学历,欢迎来共事,有个offer注意查收。 前端/后端/测试等均可投→技术大厂机会。 都说面试是 7分靠技术,3分靠技巧,今天我…

9.2 栅格图层符号化单波段灰度渲染

文章目录 前言单波段灰度QGis设置为单波段灰度二次开发代码实现单波段灰度 总结 前言 介绍栅格图层数据渲染之单波段灰度显示说明:文章中的示例代码均来自开源项目qgis_cpp_api_apps 单波段灰度 以“3420C_2010_327_RGB_LATLNG.tif”数据为例,在QGis中…

easy-poi实现动态列(标题)、多sheet导出excel

一个sheet动态导出、伪代码&#xff0c;创建填充后的workbook对象 List<Map<String, Object>>list new ArrayList<Map<String, Object>>(); HashMap<String, Object> map new HashMap<>(); map.put("name", "小明")…

启动完 kubelet 日志显示 failed to get azure cloud in GetVolumeLimits, plugin.host: 1

查看 kubelet 日志组件命令 journalctl -xefu kubelet 文字描述问题 Jul 09 07:45:17 node01 kubelet[1344]: I0709 07:45:17.410786 1344 operation_generator.go:568] MountVolume.SetUp succeeded for volume "default-token-mfzqf" (UniqueName: "ku…

全光谱灯和普通led灯的区别?忠告行业三大隐患弊端!

随着社会的迅猛发展和生活步伐的加速&#xff0c;科技产品层出不穷&#xff0c;其中全光谱灯作为书房的新宠&#xff0c;备受瞩目。它是否真如其宣传的那样具有多重优势&#xff0c;尤其是对那些格外注重视力健康的人群而言&#xff0c;全光谱灯是否会带来潜在的健康风险&#…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第一篇 嵌入式Linux入门篇-第十二章 Linux 权限管理

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

Java基础(十六):String的常用API

目录 一、构造器方法二、String与字节数组的转换&#xff08;编码与解码&#xff09;1、字符串 --> 字节数组&#xff1a;&#xff08;编码&#xff09;2、字节数组 --> 字符串&#xff1a;&#xff08;解码&#xff09;3、iso-8859-1的特殊用法4、byte数组的数字表示 三…

Java版Flink使用指南——从RabbitMQ中队列中接入消息流

大纲 创建RabbitMQ队列新建工程新增依赖编码设置数据源配置读取、处理数据完整代码 打包、上传和运行任务测试 工程代码 在《Java版Flink使用指南——安装Flink和使用IntelliJ制作任务包》一文中&#xff0c;我们完成了第一个小型Demo的编写。例子中的数据是代码预先指定的。而…

判断对象能否回收的两种方法,以及JVM引用

判断对象能否回收的两种方法&#xff1a;引用计数算法&#xff0c;可达性分析算法 引用计数算法&#xff1a;给对象添加一个引用计数器&#xff0c;当该对象被其它对象引用时计数加一&#xff0c;引用失效时计数减一&#xff0c;计数为0时&#xff0c;可以回收。 特点&#xf…

自动驾驶SLAM又一开源巅峰之作!深挖时间一致性,精准构建超清地图

论文标题&#xff1a; DTCLMapper: Dual Temporal Consistent Learning for Vectorized HD Map Construction 论文作者&#xff1a; Siyu Li, Jiacheng Lin, Hao Shi, Jiaming Zhang, Song Wang, You Yao, Zhiyong Li, Kailun Yang 导读&#xff1a; 本文介绍了一种用于自动…

突发!马斯克3140亿参数Grok开源!Grok原理大公开!

BIG NEWS: 全球最大开源大模型&#xff01;马斯克Grok-1参数量3410亿&#xff0c;正式开源!!! 说到做到&#xff0c;马斯克xAI的Grok&#xff0c;果然如期开源了&#xff01; 就在刚刚&#xff0c;马斯克的AI创企xAI正式发布了此前备受期待大模型Grok-1&#xff0c;其参数量达…

硅纪元视角 | 虚拟神经科学的突破:AI「赛博老鼠」诞生

在数字化浪潮的推动下&#xff0c;人工智能&#xff08;AI&#xff09;正成为塑造未来的关键力量。硅纪元视角栏目紧跟AI科技的最新发展&#xff0c;捕捉行业动态&#xff1b;提供深入的新闻解读&#xff0c;助您洞悉技术背后的逻辑&#xff1b;汇聚行业专家的见解&#xff0c;…

企业需要什么样的MES?

MES&#xff08;英文全称&#xff1a;Manufacturing Execution System&#xff09;&#xff0c;即制造执行系统&#xff0c;是面向车间生产的管理系统。它位于上层计划管理系统&#xff08;如ERP&#xff09;与底层工业控制&#xff08;如PCS层&#xff09;之间&#xff0c;是制…