草庐IT

mini-vite

全部标签

NestJs系列之使用Vite搭建项目

介绍在使用nest创建项目时,默认使用webpack进行打包,有时候启动项目需要1-2分钟。所以希望采用vite进行快速启动项目进行开发。本文主要使用NestJs、Vite和swc进行配置。文章实操较多,概念性的东西可访问对应的官方文档进行了解。tips:个人认为概念性的东西,在文章中指出。对熟悉的人来说直接就实操,节省时间。感兴趣的小伙伴探索性去了解,提升学习乐趣概念什么是NestJS?官方地址:NestJS-AprogressiveNode.jsframework中文地址:NestJS简介|NestJS中文文档|NestJS中文网(bootcss.com)个人理解:NodeJS的Sprin

X [ERROR] Two output files share the same path but have different contents: node_modules\.vite\deps_

X[ERROR]Twooutputfilessharethesamepathbuthavedifferentcontents:node_modules\.vite\deps_temp_cb676b7c\Vue.jsD:\front\_other\hole\node_modules\esbuild\lib\main.js:1636leterror=newError(`${text}${summary}`);^Error:Buildfailedwith1error:error:Twooutputfilessharethesamepathbuthavedifferentcontents:node_m

Vite启动后提示“Network: use `--host` to expose“,且无法通过网络IP访问服务

起因: 当使用Vite构建项目后,需要通过局域网中的电脑或手机访问服务调试时,发现通过IP+端口无法访问。简单来说就是方便自己手机本地访问而查看的Network地址vite-vue@0.0.0serve/Users/UserName/Workspace/vue-vite>vite|vitepreviewvitev2.3.7buildpreviewserverrunningat:>Local:http://localhost:3000|5000/>Network:use`--host`toexpose问题原因当 局域网 中另一台设备需要访问该服务时,必须通过本机 IP+端口 访问。尝试访问后,发

【vue3vite运行报错】Failed to resolve import “@vue/server-renderer from “src\App.vue“. Does the file exist

这里写自定义目录标题【vue3vite运行报错】Failedtoresolveimport“@vue/server-rendererfrom“src\App.vue“.Doesthefileexist【vue3vite运行报错】Failedtoresolveimport“@vue/server-rendererfrom“src\App.vue“.Doesthefileexist当遇到这样的情况可以试试更新vite版本npmivite@vitejs/plugin-vue--save-dev

前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第五章 组件库安装和使用(Element-Plus基础配置)

系列文章目录(点击查看)文章目录系列文章目录(点击查看)前言一、安装二、快速开始三、自动引入1、首先你需要安装`unplugin-vue-components`和`unplugin-auto-import`这两款插件2、在`vite.config.ts`文件中添加如下代码四、自己配置vite和plugins1、安装`plugins`2、添加`vite.plugins.ts`文件3、修改`vite.config.ts`文件五、测试组件1、删除无用文件2、测试是否可用总结前言使用Element-Plus组件库进行开发,正如官网介绍,Element-Plus有如下好处:一致Consistency与现

(使用vite搭建vue3项目(vite + vue3 + vue router + pinia + element plus))

使用vite搭建vue3项目(vite+vue3+vuerouter+pinia+elementplus)初始化项目安装依赖,运行项目初始配置初始化项目1.需要在创建项目的位置cmd目录下执行2.npminitvite@latest回车npminitvite@latest3.填上自己的项目名称回车4.选择vue回车5.选择TypeScript回车6.项目创建完成或者一步到位通过附加的命令行选项直接指定项目名称和你想要使用的模板(根据自己npm版本来选择不同的命令行)#npm6.xnpmcreatevite@latestvite-vue--templatevue-ts#npm7+,extrado

超级详细 最新 vite4+vue3+ts+element-plus+eslint-prettier 项目搭建流程

vite4+vue3+ts+element-plus项目搭建流程系列文章目录【element-plus】table表格每行圆角解决方案element也通用【Vue3+Vite+Ts+element-plus】使用tsx实现左侧栏菜单无限层级封装超级详细GitBook和GitLab集成步骤【linux环境】相关插件连接:vitehttps://cn.vitejs.dev/guide/vuehttps://cn.vuejs.org/vue-routerhttps://router.vuejs.org/zh/vuexhttps://vuex.vuejs.org/zh/guide/Piniahttps

vue3 + vite 性能优化,详细代码说明

对于Vue3和Vite应用的性能优化,以下是一些常见的技巧和建议:使用Tree-shaking:Vue3和Vite支持ES模块的静态分析,因此可以利用Tree-shaking特性,只引入项目中实际使用的模块,减少打包体积。懒加载路由:使用VueRouter的动态导入功能,将路由按需加载,可以减少初始加载的资源量,提高应用的性能。异步组件:将组件按需加载,可以减少初始加载时的组件数量,提高应用的启动速度。缓存组件:在使用频率高、不经常变动的组件上设置keep-alive,通过缓存组件实例,减少组件的初始化和销毁次数。优化图片加载:使用合适的图片格式,如WebP格式可以提供更好的图像压缩效果。另外

TypeScript配置-- 2. 了解ts配置项,根据vite项目了解typescript配置文件,tsconfig.json、tsconfig.node.json、

配置项目的TS仅对于Ts项目来说,产生红色波浪线,主要是由于语法错误,当然也有其他情况…1.制造红色波浪线这边先引入一个greeter.ts文件发现居然没有跟一些项目一样,有红色的波浪线,不是说了函数里面的参数是需要显示追加类型的吗。tsconfig.json不知道有什么配置项?鼠标悬浮试试~~2.tsconfig.json主配置项具体可以看官方文档:此处在tsconfig.json中,第一层的配置项包括以下几个:“compilerOptions”:这是一个对象,用于配置TypeScript编译器的选项。它可以设置诸如目标版本、模块系统、输出目录、严格类型检查等编译器相关的选项。“files”

一篇学会如何从Webpack迁移到Vite

Vite是最新的前端开发工具,其受欢迎程度和采用率都在大幅增长。可以查看下图中来自npmtrends的下载。trends推动这一趋势的是Vite核心的一个关键概念:开发人员体验。与Webpack相比,Vite在开发过程中能显著缩短构建时间和热重载时间。它通过利用浏览器中的ES模块等现代浏览器功能来实现这一目标。在我们深入探讨从Webpack迁移到Vite的过程之前,值得注意的是,前端开发领域正在不断发展,Vite并不是唯一受到关注的工具。esbuild是另一款速度惊人的JavaScript捆绑程序和精简程序,正吸引着网络开发人员的目光。如果你正在寻找一种零配置的方法,你可能还想了解一下Parc